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({

无法在单个页面上使用多个Slick轮播

1 个答案: