无法使多个Slick转盘在一个页面上工作

Question

我在一个网站的单个页面上有三个转盘。其中两个使用相同的配置，所以当我使用以下代码时，它们工作得很好；

$('.carousel .items').slick({
dots: true,
infinite: false,
speed: 300,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2,
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});

我需要添加另一个显示更多项目的转盘，所以我给了它一个唯一的Id，并尝试添加以下代码；

$('#buildings-for-sale .items').slick({
dots: true,
infinite: false,
speed: 300,
arrows: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});

问题是，只有在Javascript中首先定义的旋转木马才能工作，而不是同时使用两种不同的配置。

我尝试在each((循环中初始化每个滑块，并使用数据标记进行必要的修改，虽然这可以使所有滑块正确呈现，但显示四个元素的滑块不会正确滑动到下一组结果，它只是显示一个空白屏幕。这是我试过的代码；

$('.carousel .items').each(function(idx, item){
var slides = $(this).attr('data-slides');
if (!slides > 0) {
slides = 2;
}
console.log("Slides " + slides);
$(this).slick({
dots: true,
infinite: false,
speed: 300,
arrows: false,
slidesToShow: slides,
slidesToScroll: slides,
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});

有没有人对我如何让它发挥作用有什么建议？

Answer 1

阅读您的评论后，最简单的方法可能是从第一个函数调用中排除第三个转盘：

$('.carousel:not(#buildings-for-sale) .items').slick({