使用Slick旋转木马在不同的断点上显示不同数量的幻灯片。

Question

我正在使用slick.js来构建一个响应式的旋转木马。目前，对于980px的断点，我想只显示两张幻灯片，但对我来说是行不通的。这是我的代码:-

  $(document).ready(function() {
$('.whatsNextSlick').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,

    responsive: [
        {
                breakpoint:980,
                settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
                infinite:true

            }


        },
        {
            breakpoint:767,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                infinite:true,
               centerMode: true,
                centerPadding: '20%'
            }

        }


    ]
});



  });

谁能帮我理解一下，我的代码到底出了什么问题？

我的代码有什么问题吗？

Answer 1

它在我的机器上完美地工作，我添加了一些CSS，看起来很漂亮。

$('.carousel').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: 980,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true
      }
    },
    {
      breakpoint: 767,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        centerMode: true,
        centerPadding: '20%'
      }
    }
  ]
});

html,
body {
  background-color: #e74c3c
}

.wrapper {
  width: 100%;
  padding-top: 20px;
  text-align: center;
}

h2 {
  font-family: sans-serif;
  color: #fff;
}

.carousel {
  width: 90%;
  margin: 0px auto;
}

.slick-slide {
  margin: 10px;
}

.slick-slide img {
  width: 100%;
  border: 2px solid #fff;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />


<div class="responsive">
  <h2>Slick Carousel Example</h2>
  <div class="carousel">
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/200"></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>