Troubleshooting

Common issues and solutions for Slick Carousel

Overview

This guide covers common issues you might encounter when implementing Slick Carousel and how to resolve them.

Before reporting an issue, please check this troubleshooting guide and search existing issues on GitHub.

Getting Help

Where to Get Support

If you’re having problems getting Slick to work:

1. Stack Overflow: Search or ask at stackoverflow.com/questions/tagged/slick
2. Gitter Chat: Join the community at gitter.im/kenwheeler/slick
3. Documentation: Review the complete docs
4. GitHub Issues: For bug reports only (requires test case)

GitHub Issues is not for general support questions. Use Stack Overflow or Gitter for help.

Before Reporting a Bug

All bug reports require a jsFiddle test case:

1. Fork this baseline JSFiddle: https://jsfiddle.net/o1yehw0g/1/
2. Reproduce your bug with minimal code
3. Use non-minified files (we cannot debug .min.js)
4. Include only the bare minimum HTML, CSS, and JavaScript

Issues without a test case may be closed without response.

Common Issues

Initialization Problems

Slick is not initializing

Symptoms: Carousel doesn’t appear or remains as a list.

Common Causes:

1. jQuery not loaded or wrong version

   <!-- ✅ Correct order -->
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   <script src="slick/slick.min.js"></script>
   <script>
     $(document).ready(function(){
       $('.slider').slick();
     });
   </script>
   

2. Initialization before DOM ready

   // ❌ Wrong - might run before DOM is ready
   $('.slider').slick();
   
   // ✅ Correct
   $(document).ready(function(){
     $('.slider').slick();
   });
   

3. CSS files not loaded

   <!-- Both CSS files required -->
   <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
   <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
   

4. Incorrect selector

   // ❌ Wrong - selector doesn't match
   $('.slideshow').slick();  // But element has class="slider"
   
   // ✅ Correct
   $('.slider').slick();
   

Console errors: '$(...).slick is not a function'

Cause: jQuery is not loaded, or Slick is loaded before jQuery.

Solution: Ensure correct script loading order:

<!-- 1. jQuery first (required) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- 2. Then Slick -->
<script src="slick/slick.min.js"></script>

<!-- 3. Then your initialization code -->
<script>
  $(document).ready(function(){
    $('.slider').slick();
  });
</script>

Slider shows all slides at once

Cause: CSS files not loaded properly.

Solution:

1. Verify CSS files are loaded:

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

2. Check browser developer tools Network tab for 404 errors

3. Verify file paths are correct:

   <!-- If slick folder is in same directory as HTML -->
   <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
   
   <!-- If using CDN -->
   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
   

Display & Layout Issues

Slides not displaying correctly (width/height issues)

Problem: Slides have incorrect dimensions or overlap.

Solutions:

1. Ensure parent container has defined dimensions:

   .slider {
     width: 100%;
     max-width: 1200px;
   }
   

2. Use adaptiveHeight for varying slide heights:

   $('.slider').slick({
     adaptiveHeight: true
   });
   

3. Call setPosition after dynamic content loads:

   $('.slider').slick();
   
   // After images load or content changes
   $('.slider').slick('setPosition');
   

4. For images, ensure they’re loaded:

   $(window).on('load', function() {
     $('.slider').slick('setPosition');
   });
   

Images not showing or broken layout

Problem: Images don’t display or carousel layout breaks.

Solutions:

1. Use lazy loading:

   <div class="slider">
     <div><img data-lazy="image1.jpg" /></div>
     <div><img data-lazy="image2.jpg" /></div>
   </div>
   
   <script>
     $('.slider').slick({
       lazyLoad: 'ondemand'
     });
   </script>
   

2. Initialize after images load:

   $(window).on('load', function() {
     $('.slider').slick();
   });
   

3. Set explicit image dimensions:

   .slider img {
     width: 100%;
     height: auto;
     display: block;
   }
   

Arrows or dots not appearing

Problem: Navigation controls are missing.

Solutions:

1. Include slick-theme.css:

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

2. Verify options are enabled:

   $('.slider').slick({
     arrows: true,  // Enable arrows (default: true)
     dots: true     // Enable dots (default: false)
   });
   

3. Check font files path:

   // In your Sass variables
   $slick-font-path: "./fonts/" !default;
   $slick-loader-path: "./" !default;
   

4. Use custom arrows:

   $('.slider').slick({
     prevArrow: '<button type="button" class="slick-prev">Previous</button>',
     nextArrow: '<button type="button" class="slick-next">Next</button>'
   });
   

Slider not responsive / breaking on mobile

Problem: Carousel doesn’t adapt to smaller screens.

Solution: Use responsive breakpoints:

$('.slider').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

Functionality Issues

Events not firing

Problem: Event handlers don’t execute.

Solution: Bind events before initialization:

// ❌ Wrong - event bound after init
$('.slider').slick();
$('.slider').on('afterChange', function(event, slick, currentSlide) {
  console.log(currentSlide);
});

// ✅ Correct - event bound before init
$('.slider')
  .on('afterChange', function(event, slick, currentSlide) {
    console.log(currentSlide);
  })
  .slick();

The init event must be bound before calling .slick() or it won’t fire.

Touch/swipe not working on mobile

Problem: Cannot swipe slides on touch devices.

Solutions:

1. Verify touch options are enabled:

   $('.slider').slick({
     swipe: true,        // Default: true
     touchMove: true,    // Default: true
     touchThreshold: 5   // Default: 5
   });
   

2. Check for CSS interference:

   /* Remove if present */
   .slider {
     /* touch-action: none; */ /* Remove this */
   }
   

3. Increase touch threshold for better detection:

   $('.slider').slick({
     touchThreshold: 10  // More sensitive
   });
   

Autoplay not working or stopping unexpectedly

Problem: Autoplay doesn’t start or stops after interaction.

Solutions:

1. Basic autoplay setup:

   $('.slider').slick({
     autoplay: true,
     autoplaySpeed: 3000  // 3 seconds
   });
   

2. Prevent pausing on hover:

   $('.slider').slick({
     autoplay: true,
     pauseOnHover: false,
     pauseOnFocus: false
   });
   

3. Manually control autoplay:

   // Stop autoplay
   $('.slider').slick('slickPause');
   
   // Start autoplay
   $('.slider').slick('slickPlay');
   

Methods not working

Problem: Method calls fail or return undefined.

Solution: Use correct 1.4+ method syntax:

// Initialize
$('.slider').slick();

// ❌ Wrong
var currentSlide = $('.slider').slickCurrentSlide();

// ✅ Correct
var currentSlide = $('.slider').slick('slickCurrentSlide');

// Other method examples
$('.slider').slick('slickNext');           // Next slide
$('.slider').slick('slickPrev');           // Previous slide
$('.slider').slick('slickGoTo', 2);        // Go to slide 2
$('.slider').slick('slickAdd', '<div>New slide</div>');  // Add slide
$('.slider').slick('unslick');             // Destroy

Dynamic Content Issues

Adding/removing slides dynamically

Problem: Dynamic slide changes don’t work properly.

Solutions:

1. Add slides:

   // Add to end
   $('.slider').slick('slickAdd', '<div>New slide</div>');
   
   // Add at specific index
   $('.slider').slick('slickAdd', '<div>New slide</div>', 2);
   
   // Add before specific index
   $('.slider').slick('slickAdd', '<div>New slide</div>', 2, true);
   

2. Remove slides:

   // Remove by index
   $('.slider').slick('slickRemove', 2);
   
   // Remove first slide
   $('.slider').slick('slickRemove', 0);
   

3. Refresh after external changes:

   // If you manually change DOM
   $('.slider').slick('unslick');  // Destroy
   $('.slider').slick();           // Reinitialize
   

Slick in hidden container (tabs, modals, accordions)

Problem: Slider doesn’t display correctly when parent is initially hidden.

Solution: Reinitialize or call setPosition when container becomes visible:

// Initialize normally
$('.slider').slick();

// When tab/modal becomes visible
$('#myTab').on('shown.bs.tab', function() {
  $('.slider').slick('setPosition');
});

// For modals
$('#myModal').on('shown.bs.modal', function() {
  $('.slider').slick('setPosition');
});

// Or reinitialize
$('#myTab').on('shown.bs.tab', function() {
  $('.slider').slick('unslick').slick();
});

AJAX loaded content

Problem: Content loaded via AJAX doesn’t display correctly.

Solution: Initialize Slick after AJAX completes:

$.ajax({
  url: '/api/slides',
  success: function(data) {
    // Add content to DOM
    $('.slider').html(data);
    
    // Initialize Slick
    $('.slider').slick({
      slidesToShow: 3,
      slidesToScroll: 1
    });
  }
});

// Or if already initialized
$.ajax({
  url: '/api/slides',
  success: function(data) {
    $('.slider').slick('unslick');  // Destroy
    $('.slider').html(data);         // Update content
    $('.slider').slick();            // Reinitialize
  }
});

Performance Issues

Slider is slow or laggy

Problem: Animations are choppy or slider feels sluggish.

Solutions:

1. Enable hardware acceleration:

   $('.slider').slick({
     useCSS: true,
     useTransform: true  // Uses GPU acceleration
   });
   

2. Optimize images:

   • Use appropriately sized images
   • Compress images
   • Use lazy loading:
   $('.slider').slick({
     lazyLoad: 'ondemand'
   });
   

3. Reduce slides shown:

   $('.slider').slick({
     slidesToShow: 3,  // Show fewer slides
     infinite: false   // Disable infinite if not needed
   });
   

4. Increase animation speed:

   $('.slider').slick({
     speed: 300  // Faster transitions feel snappier
   });
   

Memory leaks or performance degradation over time

Problem: Page becomes slower after using slider for a while.

Solution: Properly destroy Slick when removing from DOM:

// Before removing slider from DOM
$('.slider').slick('unslick');

// Example with single-page app
function cleanupPage() {
  $('.slider').slick('unslick');
  // Remove event listeners
  $('.slider').off('afterChange');
}

Browser-Specific Issues

Issues in Internet Explorer

Problem: Slider doesn’t work in IE8-11.

Solutions:

1. Use compatible jQuery version:

   <!-- For IE8-9 support -->
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   

2. Disable CSS3 features for IE8-9:

   $('.slider').slick({
     useCSS: false,       // Fallback to jQuery animate
     useTransform: false
   });
   

3. Check for console errors (use IE Developer Tools F12)

Safari/iOS specific issues

Problem: Slider behaves differently in Safari or iOS.

Solutions:

1. Add webkit prefixes in custom CSS:

   .slick-slide {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
   

2. Adjust touch threshold:

   $('.slider').slick({
     touchThreshold: 10
   });
   

Debugging Tips

Enable console logging

Monitor Slick events in the console:

$('.slider')
  .on('init', function(event, slick) {
    console.log('Slick initialized:', slick);
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    console.log('Changing from', currentSlide, 'to', nextSlide);
  })
  .on('afterChange', function(event, slick, currentSlide) {
    console.log('Changed to slide', currentSlide);
  })
  .slick();

Inspect slider instance

Access the Slick instance for debugging:

// Get the Slick instance
var slickInstance = $('.slider').slick('getSlick');
console.log(slickInstance);

// Check current settings
var speed = $('.slider').slick('slickGetOption', 'speed');
console.log('Current speed:', speed);

Verify initialization

Check if Slick is properly initialized:

if ($('.slider').hasClass('slick-initialized')) {
  console.log('Slick is initialized');
} else {
  console.log('Slick is NOT initialized');
}

Creating a Test Case

When reporting bugs, you must provide a jsFiddle:

1. Fork the baseline JSFiddle

   Start with: https://jsfiddle.net/o1yehw0g/1/

2. Reproduce the bug

   Add only the minimum code needed to demonstrate the issue:

   • Remove unrelated HTML
   • Remove unrelated CSS
   • Remove unrelated JavaScript
   • Use non-minified files
3. Provide context

   In your issue report, include:

   • Link to your jsFiddle
   • Steps to reproduce
   • Expected behavior
   • Observed behavior
   • Browser/version information
   • jQuery/Slick versions

Issues without a proper test case will likely be closed.

Additional Resources

Browser Support

Check compatibility requirements

Migration Guide

Upgrade to newer versions

GitHub Issues

Search existing issues

Stack Overflow

Community Q&A