Responsive breakpoints not working for slick slider

Question

I have implemented slick slider which works fine without resizing the browser. But when I resize the browser to 1024 then the responsive breakpoint settings doesn't work.

jQuery:

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  variableWidth: true,
  variableHeight: true,
  mobileFirst: true,
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false
    }
  }]
});

Demo -- https://jsfiddle.net/squidraj/hn7xsa4y/4/

Does the slider break after you physically resize? is it broken if you were to reload the page? *DO NOT* worry about scripting for people who resize their browser. It's a waste of time. — ntgCleaner, Feb 06 '17 at 21:59
@ntgCleaner Slider doesn't break after I resize the browser. It works fine but that settings doesn't work. If I reload the page at that breakpoint then it works as well. — Prithviraj Mitra, Feb 06 '17 at 22:02
@Cage So you mean I need to adjust the width and height of the image for each media query? — Prithviraj Mitra, Feb 06 '17 at 22:03
@Cage Tried with media query and adjusted the image width with px and it worked...but have no clue why that setting is not working. — Prithviraj Mitra, Feb 06 '17 at 22:09

score 31 · Answer 1 · edited Aug 20 '19 at 15:58

31

Add this settings to your code;

$(".slides").slick({
    autoplay:true,
    mobileFirst:true,//add this one
}

edited Aug 20 '19 at 15:58

Benjamin Seche

316
2
17

answered Mar 18 '18 at 16:52

Shady Kip

359
4
7

2

Care to explain why exactly? – mrun Mar 18 '18 at 17:11
the reason it *may* work is because when you add `mobileFirst:true` it will use the 'base' settings first (in this case `slidesToShow: 1,`) - the 'base' settings being those NOT in the `responsive` array - – wal Nov 04 '20 at 12:34
additionally, using `mobileFirst` makes it easier to think about - your `responsive` settings then contain the 'larger' sizes - in the example above its mobile first so it uses `slidesToShow=1` then at 1024 it uses `slidesToShow: 4,` – wal Nov 04 '20 at 12:35

score 1 · Answer 2 · edited May 17 '18 at 13:30

1

Add slidesToShow and slidesToScroll option in each breakpoint.

 {
  breakpoint: 786,
    settings: {
              slidesToShow: 3,
              slidesToScroll: 1,
              }
 },
 {
  breakpoint: 568,
    settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
  }

edited May 17 '18 at 13:30

Ivan Vinogradov

4,269
6
29
39

answered May 17 '18 at 11:45

Soumitra Sarkar

610
6
9

score 1 · Answer 3 · answered Feb 20 '19 at 08:18

First of all, "variableHeight" option does not exist in Slick Carousel.

To solve your issue, remove variableWidth: true, because this will make your slides take full with of the carousel. And you can also not use "mobileFirst" option if your page is not using this methodology.

So finally your config should be like this, below

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  mobileFirst: true, //optional, to be used only if your page is mobile first
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false,
    }
  }]
});

Best Regards.

score 0 · Answer 4 · answered Apr 29 '17 at 21:04

This did the trick for me.

    function resetSlick($slick_slider, settings) {
            $(window).on('resize', function() {
                if ($(window).width() < 320) {
                    if ($slick_slider.hasClass('slick-initialized')) {
                        $slick_slider.slick('unslick');
                    }
                    return
                }

                if (!$slick_slider.hasClass('slick-initialized')) {
                    return $slick_slider.slick(settings);
                }
            });
        }

 slick_slider = $('.client-logos');
    settings = {
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow: '',
        nextArrow: '',
        pauseOnHover: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]

    };
     slick_slider = $('.container');
    settings = {
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow: '',
        nextArrow: '',
        pauseOnHover: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]

    };
    slick_slider.slick(settings);
    resetSlick(slick_slider, settings);

Add this to your js and call the slider as shown.

and in your css make the slide display: inline-block; that's it. will work on all responsive screens.

score 0 · Answer 5 · answered Jan 26 '22 at 20:57

tl;dr When multiple sliders on page changing $('.selector').slick({...}) order helped

I had similar issue. I don't understand why but slidesToShow: 2 didn't take effect on mobile device for me although if you resize it back and forth it took effect. mobileFirst:true helped but broke desktop. Adding both slidesToShow and slidesToScroll didn't help. But when I placed initialization of sliders in the same order as they appear on the page it worked. I don't understand why... I don't understand how to fix this if there're multiple pages with different slider locations...

score -1 · Answer 6 · answered Nov 16 '21 at 14:43

-1

mobileFirst:true,//add this to your JavaScript file and it should work :)

answered Nov 16 '21 at 14:43

Romario

1

This is the same solution as in [this other answer](https://stackoverflow.com/a/49350486/2227743). *When answering older questions that already have answers, please make sure you provide either a novel solution or a significantly better explanation than existing answers.* – Eric Aya Nov 16 '21 at 15:08
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30356620) – Andrew Halil Nov 17 '21 at 11:19
@EricAya my bad won't do it again :) – Romario Feb 14 '22 at 08:27

score -2 · Answer 7 · edited Jul 01 '20 at 08:37

-2

First, you use old version of slick in your example. This verson doesn't support mobileFirst property. Second, you must remove variableWidth if you want to use slidesToShow property.

edited Jul 01 '20 at 08:37

Denis G. Labrecque

1,023
13
29

answered Feb 06 '17 at 22:14

Алексей Косьяненко

87
1
7

On 1025 and above the slider will show one centered image with 2 partial images at left and right which works fine in my fiddle using variableWidth(otherwise I was getting blank white spaces). Now when I resize the browser to 1024 then it will show 4 slides (without cropping the images). I am using the latest version of slick. – Prithviraj Mitra Feb 06 '17 at 22:26
Adjustments within the media query works for me but I was trying to find the reason why the breakpoints doesn't work as stated in the plugin page. – Prithviraj Mitra Feb 06 '17 at 22:27
see my fiddle. On 1024 and below one centered slide, 1025 and above - 4 slides. – Алексей Косьяненко Feb 06 '17 at 22:33
It would be the opposite. On 1024 - 4 slides and above -1 slide centered. – Prithviraj Mitra Feb 06 '17 at 23:24
just to let everyone here know if you add "mobilefirst" option, it will ignore the desktop version and you will ended up having same setting for desktop – sam kh Dec 21 '21 at 11:05

score -2 · Answer 8 · answered Feb 07 '17 at 01:05

I am not sure why your js template is failing with below:

 responsive: [{
    breakpoint: 1024,

I would follow up with their documentation, community, or file a bug.

In any case it is better practice to use CSS3 media queries for this. One approach; nest a div around the slider and position it relative, scale it and it's child elements with width: 100%; and declaring max and min width's within defined resolutions. This should start you in the right direction. Make sure to also make proper use of meta viewport.

Responsive breakpoints not working for slick slider

8 Answers8

Linked