使用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/slick-carousel@1.8.1/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/slick-carousel@1.8.1/slick/slick.min.js"></script>