jQuery 响应断点不适用于光滑的滑块

Responsive breakpoints not working for slick slider

提问by Prithviraj Mitra

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.

我已经实现了光滑的滑块，无需调整浏览器大小即可正常工作。但是当我将浏览器的大小调整为 1024 时，响应断点设置不起作用。

Jquery--

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/

演示 -- https://jsfiddle.net/squidraj/hn7xsa4y/4/

Any help is highly appreciated.

任何帮助都受到高度赞赏。

回答by Shady Kip

Add this settings to your code;

将此设置添加到您的代码中；

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

回答by Soumitra Sarkar

Add slidesToShowand slidesToScrolloption in each breakpoint.

在每个断点中添加slidesToShow和slidesToScroll选项。

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

回答by Ajmal

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

首先，Slick Carousel中不存在“variableHeight”选项。

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.

要解决您的问题，请删除variableWidth: true，因为这将使您的幻灯片充满轮播。如果您的页面未使用此方法，您也不能使用“mobileFirst”选项。

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.

此致。

回答by Алексей Косьяненко

First, you use old version of slick in your example. This verson doesn't support mobileFirstproperty. Second, you must remove variableWidthif you want to use slidesToShowproperty. This is working fiddle https://jsfiddle.net/Kosyanenko/2boaw2h3/1/

首先，您在示例中使用旧版本的 slick。此版本不支持mobileFirst属性。其次，variableWidth如果你想使用slidesToShow财产，你必须删除。这是工作小提琴https://jsfiddle.net/Kosyanenko/2boaw2h3/1/

回答by Sheraz Ahmed

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.

将此添加到您的 js 并调用滑块，如图所示。

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

在你的 css 中slidedisplay: inline-block;，就是这样。将适用于所有响应式屏幕。

回答by doc holiday

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

我不知道为什么你的 js 模板在下面失败：

 responsive: [{
    breakpoint: 1024,

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

我会跟进他们的文档、社区或提交错误。

In any case it is better practice to use CSS3media queriesfor this. One approach; nest a divaround the slider and position it relative, scale it and it's child elements with width: 100%;and declaring maxand minwidth's within defined resolutions. This should start you in the right direction. Make sure to also make proper use of meta viewport.

在任何情况下，最好为此使用 CSS3媒体查询。一种方法；div在滑块周围嵌套 a并定位它relative，缩放它和它的子元素，width: 100%;并在定义的分辨率内声明max和minwidth。这应该让您朝着正确的方向开始。确保也正确使用元视口。