0

我注意到当我有 2 个具有数据属性的滑块时我卡住了：data-slider以及一个options我想与每个滑块共享的对象。

next为&创建了自定义按钮，prev仅适用于第一个滑块。

我试图遍历所有滑块，但第二个滑块上的按钮导航将失败。

如何多次共享上一个和下一个按钮而不必为其指定唯一名称？

我希望能够一遍又一遍地重复使用相同的按钮。现在，我必须复制并更改按钮的名称。

有什么诀窍可以解决这个问题吗？

我的代码：

 (() => {
    const sliders = document.querySelectorAll('[data-slider]');

    if (!sliders.length) {
        return;
    }

    const options = {
        type: 'slider',
        arrows: false,
        pagination: false,
        drag: false,
        perPage: 3,
        perMove: 1,
        gap: 60,
        breakpoints: {
            767: {
                perPage: 1,
                drag: true
            },
            1024: {
                perPage: 2
            }
        }
    };

    sliders.forEach((slider, i) => {
        const nextSlide = document.querySelector('[data-slider-nav="next"]');
        const prevSlide = document.querySelector('[data-slider-nav="prev"]');

        const splide = new Splide(slider, options).mount();

        nextSlide.addEventListener('click', (e) => {
            e.preventDefault();
            splide.go('>');
        });

        prevSlide.addEventListener('click', (e) => {
            e.preventDefault();
            splide.go('<');
        });
    });
})();
4

0 回答 0