Slick carousel responsive breakpoints

Question

This is the configuration I am using to create a slick carousel on my web page:

$('#carousel').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: true,
  autoplay: true,
  autoplaySpeed: 2000,
  responsive: [
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 1008,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 800,
      settings: 'unslick',
    },
  ],
})

It is working the way it is supposed to work except for one thing... when I resize my browser window from width: 1920 to 800, the carousel unslicks it, and the content is displayed like normal divs.

But then when I increase the width of the browser window the carousel doesn't recreate it. It remains like HTML div blocks without carousel.

Any help would be appreciated.

score 14 · Accepted Answer · answered Jul 28 '15 at 07:06

14

unslick is a destructor method. Once you unslick, you need to call slick() again to construct carousel.

answered Jul 28 '15 at 07:06

Peter Wong

430
5
12

I have the same problem. Can you show me how you've fixed it? – ikbenivo Jul 28 '15 at 13:38

score 9 · Answer 2 · edited Oct 13 '17 at 04:33

9

This is one way to rebuild the carousel after unslick kills it at a breakpoint:

$(window).resize(function () {
    $('.js-slider').not('.slick-initialized').slick('resize');
});

$(window).on('orientationchange', function () {
    $('.js-slider').not('.slick-initialized').slick('resize');
});

edited Oct 13 '17 at 04:33

Reigel Gallarde

64,198
21
121
139

answered Mar 02 '17 at 01:56

Beck Johnson

1,201
1
11
11

score 8 · Answer 3 · answered Jun 17 '19 at 09:46

<section class="regular slider" style="direction:ltr">
    <div>
        <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=7">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=8">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=9">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=10">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=11">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=12">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=13">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=14">
    </div>
</section>

/////script/////

    $(document).on('ready', function() {

      $(".regular").slick({
        dots: false,
        infinite: true,
        slidesToShow: 6,
        slidesToScroll: 6,
        autoplay: true,
        autoplaySpeed: 2000,

          pauseOnHover: true,

        responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 5,
                slidesToScroll: 5,
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }

  ]


      }); 
    });

score 2 · Answer 4 · edited Jan 25 '21 at 13:14

2

On each browser resize event you need to do a check and reinitialize the Slick slider if needed (if you are on mobile and Slick slider is not initialized).

/* Get element */
var slider = $('.slider');
 
/* Slider settings */
var settings = {...}
 
/* Do this every time window gets resized */
$(window).on('resize', function() {
 
   /* If we are above mobile breakpoint unslick the slider */
   if ($(window).width() >= 800) 
   {
      /* Do this only if slider is initialized */
      if (slider.hasClass('slick-initialized')) {
         slider.slick('unslick');
      }
      return;
   }
   /* We are below mobile breakpoint, initialize the slider
      if it is not already initialized */
   else if (!slider.hasClass('slick-initialized')) 
   {
      return slider.slick(settings);
   }
});

$(window).trigger('resize');

edited Jan 25 '21 at 13:14

Felix Eve

3,811
3
40
50

answered Jul 25 '19 at 21:32

Mato

396
2
9

You would not actually need the responsive:[...] part if all you need it for is the unslick whilst you call unslick within your own resize-handler. correct? – 23b Aug 22 '19 at 11:19
Well you needed that part for initial slider initialization, but I agree it could have been written better. I edited my response - dropped the responsive setting, removed initial slider call and triggered the 'resize' event on window. – Mato Aug 22 '19 at 11:49
What a mess, but that's not your fault – Martin Zvarík Oct 22 '22 at 11:02

Davide Casiraghi · Answer 5 · 2022-01-05T08:04:28.637

I solved the responsive breakpoint issue, recalculating the number of slides at any browser resize.
.testimonialsList: it's the name of the container of my carousel.

// Create carousel
function createTestimonialCarousel(numberOfSlides){
    jQuery('.testimonialsList').not('.slick-initialized').slick({
        dots: true,
        arrows: true,
        infinite: true,
        slidesToShow: numberOfSlides,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 6000,
        pauseOnHover: true
    });
}

// Calculate number of slides to show
function calculateNumberOfSlidesToShow(){
    var carouselWidth = jQuery(".testimonialsList").width();
    var numberOfSlides = 0;
    switch (true) {
        case (carouselWidth < 767):
            numberOfSlides = 1;
            break;
        case (carouselWidth < 991):
            numberOfSlides = 2;
            break;
        case (carouselWidth < 1199):
            numberOfSlides = 3;
            break;
        case (carouselWidth > 1200):
            numberOfSlides = 3;
            break;
    }

    return numberOfSlides;
}

// Reload Carousel on browser resize (to make it responsible)
function reloadCarousel () {
    jQuery('.testimonialsList').slick('unslick');
    numberOfSlides = calculateNumberOfSlidesToShow();
    createTestimonialCarousel(numberOfSlides);
}

// Call updateMaxHeight when browser resize event fires
jQuery(window).on("resize", reloadCarousel);



jQuery(document).ready(function () {

    // Initialize the carousel on page load
    if (jQuery(".testimonialsList").length) {
        setTimeout(function () {
            numberOfSlides = calculateNumberOfSlidesToShow();
            createTestimonialCarousel(numberOfSlides);
        }, 300);
    }


});

Slick carousel responsive breakpoints

5 Answers5