Slick CSS Not Working: Causes and Fixes

Slick Slider is widely used for responsive carousels, but a common issue developers face is Slick CSS not applying or sliders appearing broken. This is almost never a JavaScript bug. In most cases, it is caused by missing, blocked, or overridden CSS.

This article explains why Slick CSS fails, how to diagnose the issue, and how to fix it correctly.

What Happens When Slick CSS Is Not Working

Typical symptoms include:

• Slides appear stacked vertically
• Slider does not move but JavaScript is loaded
• Navigation dots or arrows missing
• Layout breaks after page load

These symptoms confirm that Slick JS is running, but Slick CSS is not applied.

Required Slick CSS Files

Slick requires two CSS files to work properly:

<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">

<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">

If slick.css is missing, the slider will never work visually.

Most Common Reasons Slick CSS Fails

1. CSS File Not Loaded

Check browser DevTools → Network tab → CSS.

Common mistakes:

• Wrong file path
• File blocked by server or CDN
• 404 error

Fix:

<link rel="stylesheet" href="/assets/slick/slick.css">

<link rel="stylesheet" href="/assets/slick/slick.css">

2. Incorrect Load Order

CSS must load before Slick JS initializes.

Wrong order:

<script src="slick.min.js"></script>
<link rel="stylesheet" href="slick.css">

<script src="slick.min.js"></script>
<link rel="stylesheet" href="slick.css">

Correct order:

<link rel="stylesheet" href="slick.css">
<script src="slick.min.js"></script>

<link rel="stylesheet" href="slick.css">
<script src="slick.min.js"></script>

3. slick.css Overridden by Other CSS

Frameworks like Bootstrap or Tailwind may override Slick styles.

Check for overridden rules such as:

.slick-track { display: block; }

.slick-track { display: block; }

Fix using specificity:

.slick-track {
  display: flex !important;
}

.slick-track {
  display: flex !important;
}

4. Missing slick-theme.css

Without slick-theme.css:

• Arrows do not appear
• Dots are invisible

This does not break sliding, but appears broken visually.

Fix:

<link rel="stylesheet" href="slick-theme.css">

<link rel="stylesheet" href="slick-theme.css">

5. CSS Minification or CDN Issue

Caching tools can remove or delay Slick CSS.

Common cases:

• WordPress cache plugins
• CDN CSS combining
• Async CSS loading

Fix:

• Exclude Slick CSS from minification
• Disable async for critical CSS

6. Height Collapse Issue

If parent containers use display: none or dynamic tabs, Slick CSS may not calculate dimensions.

Fix after visibility:

$('.slider').slick('setPosition');

$('.slider').slick('setPosition');

7. Slick Initialized Before DOM Ready

CSS loads, but Slick initializes too early.

Fix:

$(document).ready(function () {
  $('.slider').slick();
});

$(document).ready(function () {
  $('.slider').slick();
});

Quick Debug Checklist

Minimal Working Example

<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">

<div class="slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
</div>

<script src="jquery.js"></script>
<script src="slick.min.js"></script>
<script>
  $(function () {
    $('.slider').slick();
  });
</script>

<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">

<div class="slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
</div>

<script src="jquery.js"></script>
<script src="slick.min.js"></script>
<script>
  $(function () {
    $('.slider').slick();
  });
</script>

Browser DevTools Tips

• Inspect .slick-track
• Confirm transform: translate3d() exists
• Check computed styles

If transform exists but layout is broken, CSS is overridden.

Final Takeaway

Slick slider failures are CSS problems, not JavaScript problems in most cases.

Fix order:

1. Confirm slick.css is loading
2. Check overrides
3. Disable aggressive caching
4. Validate initialization timing

Once CSS loads correctly, Slick works reliably.

External References

• https://kenwheeler.github.io/slick/
• https://developer.mozilla.org/en-US/docs/Web/CSS
• https://developer.chrome.com/docs/devtools/

Nasim Khan

I’m Nasim Khan, is a Software Engineer focused on building efficient and user-friendly web applications. SHe writes about web development, programming fundamentals, and modern technologies, sharing practical insights for developers and learners.