Jquery 无法在单个页面上使用多个光滑的旋转木马

我在一个网站的一个页面上有三个旋转木马。其中两个使用相同的配置，因此当我使用以下代码时，它们工作良好

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

$('#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
                }
            }
        ]
    });

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

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

$('#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
                    }
                }
            ]
        });
    });

---

有人对我如何使其工作有什么建议吗？

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

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

---

您是否尝试过在没有选择的情况下同时使用这两种方法？只是bog标准默认值？待售建筑是否也有

.carousel

类？我没有，但通过检查，我发现了问题。@Alex是的，这就是问题所在。现在修好了。