Slick Slider slidesToScroll答案

【问题标题】：Slick Slider slidesToScrollSlick Slider slidesToScroll
【发布时间】：2018-03-05 20:57:23
【问题描述】：

我正在使用光滑的滑块来显示 5 块信息。我已经在大屏幕上构建了它，因此滑块实际上不会滑动。相反，它只是显示浮动 div 之类的块。我想在少于 768 次选择的移动设备上做的是显示一些块，让用户在他们选择时滑动查看所有块。我遇到的问题是在移动设备上，我将 slidesToScroll 写为 1，而它似乎忽略了我写的断点：

    $(".xb-reg").slick({
 dots: false,
 infinite: false,
 slidesToScroll: 2,
 variableWidth: true,
 autoplay: false,
 autoplaySpeed: 2000,
      responsive: [
           {
                breakpoint: 768,
                settings: {
                     slidesToScroll: 1
                }
           }
      ]
});

这是我的html：

<div class="slider-container">
  <div class="xb-reg slider">
    <div class="tkr">
      Info Block 1
    </div>
    <div class="tkr">
      Info Block 2
    </div>
    <div class="tkr">
      Info Block 3
    </div>
    <div class="tkr">
      Info Block 4
    </div>
    <div class="tkr">
      Info Block 5
    </div>
  </div>

【问题讨论】：

标签： jquery slick.js

【解决方案1】：

Just Remove Variable width True 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Pratice</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
</head>

<body>
    <div class="slider-container">
        <div class="xb-reg slider">
            <div class="tkr">
                Info Block 1
            </div>
            <div class="tkr">
                Info Block 2
            </div>
            <div class="tkr">
                Info Block 3
            </div>
            <div class="tkr">
                Info Block 4
            </div>
            <div class="tkr">
                Info Block 5
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(".xb-reg").slick({
            dots: false,
            slidesToScroll: 2,
            slidesToShow: 3,
            autoplay: false,
            autoplaySpeed: 2000,
            responsive: [{
                breakpoint: 768,
                settings: {
                    slidesToScroll: 1,
                    slidesToShow: 1,
                }
            }]
        });

    </script>
</body>

</html>

【讨论】：

感谢您的回复。我已经研究过删除可变宽度，根据文档，这似乎是解决方案，但就我而言，它对我不起作用。使用您编写的代码，我的滑块仍然在 iphone 7 上一次滚动 2 个，并且将无限设置为 false 最后一张幻灯片永远不会显示。我以前使用过可变宽度，所以我可以用 css 控制幻灯片的宽度。在这一点上，继续这样做对我来说不是问题，但我想知道是否存在阻止它正常工作的问题。

【解决方案2】：

感谢 Manish，我能够对代码和我的 css 进行一些调整，以获得我需要的解决方案。

$(".xb-reg").slick({
     dots: false,
     infinite: false,
     arrows: false,
     variableWidth: true,
     slidesToShow: 3,
     autoplay: false,
     autoplaySpeed: 2000,
          responsive: [
               {
               breakpoint: 9999,
               settings: "unslick"
               },
               {
                    breakpoint: 768,
                    settings: {
                         slidesToShow: 2,
                    }
               }
          ]
});

【讨论】：