Responsive breakpoints not working for slick slider

问题

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/

Any help is highly appreciated.

回答1:

Add this settings to your code;

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

回答2:

Add slidesToShow and slidesToScroll option in each breakpoint.

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

回答3:

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.

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

回答5:

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.

回答6:

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.

来源：https://stackoverflow.com/questions/42077979/responsive-breakpoints-not-working-for-slick-slider