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/

Apatetic

Use CSS3 media queries to respond your slider. – Duhamel

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. – Unplaced

@Unplaced 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. – Apatetic

@Cage So you mean I need to adjust the width and height of the image for each media query? – Apatetic

@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. – Apatetic

Answer 1

Add this settings to your code;

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

Dorsey

Care to explain why exactly? – Terbecki

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 - – Louvenialouver

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, – Louvenialouver

Answer 2

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.

Dissension

Answer 3

Add slidesToShow and slidesToScroll option in each breakpoint.

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

Morry

Answer 4

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.

Aylmer

Answer 5

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

Simdars

This is the same solution as in this other answer. 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. – Devine

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Lin

@EricAya my bad won't do it again :) – Simdars

Answer 6

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...

Outport

Answer 7

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.

Octavia

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. – Apatetic

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. – Apatetic

see my fiddle. On 1024 and below one centered slide, 1025 and above - 4 slides. – Thickset

It would be the opposite. On 1024 - 4 slides and above -1 slide centered. – Apatetic

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 – Pieter