如何在同一页面中多次添加同一个carousel轮播组件？

• 使用document.querySelector('.items')仅能匹配页面中第一个类名为items的轮播容器，其余轮播容器未绑定任何交互事件
• 原有代码的状态变量isDown/startX/scrollLeft为全局作用域，多个轮播共用时会出现状态冲突，无法独立维护每个轮播的拖拽状态

直接替换原有JS代码即可，HTML和CSS无需修改，后续新增任意带items类的轮播容器也会自动生效：

// 选中页面中所有轮播容器
const allSliders = document.querySelectorAll('.items');

// 为每个轮播容器单独绑定事件、维护独立状态
allSliders.forEach(slider => {
    let isDown = false;
    let startX;
    let scrollLeft;

    slider.addEventListener('mousedown', (e) => {
        isDown = true;
        slider.classList.add('active');
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
    });
    slider.addEventListener('mouseleave', () => {
        isDown = false;
        slider.classList.remove('active');
    });
    slider.addEventListener('mouseup', () => {
        isDown = false;
        slider.classList.remove('active');
    });
    slider.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * 1; // 调整数值可修改拖拽灵敏度
        slider.scrollLeft = scrollLeft - walk;
    });
})

内容的提问来源于stack exchange，提问作者DinaDarvishi