无法让多个 Slick 轮播在单个页面上工作

Unable to get multiple Slick carousels to work on a single page

我在一个网站的单个页面上有三个轮播。其中两个使用相同的配置,因此当我使用以下代码时它们可以正常工作;

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

有人对我如何让它工作有任何建议吗?

阅读您的评论后,最简单的方法可能是从第一个函数调用中排除第三个轮播:

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