滑块仅适用于第一项，需要“EachFor”元素

Question

我有以下滑块代码：

 const slides = document.querySelector('.slides');
    const slideshow = new Slideshow(slides);

    document.querySelector('.slides-nav__item--prev').addEventListener('click', () => slideshow.prev());
    document.querySelector('.slides-nav__item--next').addEventListener('click', () => slideshow.next());

页面上的第一个也是唯一一个滑块工作正常，没有任何问题，但是当我需要在同一页面上添加第二个滑块时，第一个滑块有效，第二个滑块不起作用。

我一直在检查如何添加“EachFor”元素的详细信息（让滑块在每个类项目上工作。），但似乎有点超出了我的理解范围。感谢任何帮助，很确定不会超过几分钟，我已经花了 6 个小时，而且一寸都动不了。

我使用了下面的代码，它对它们都适用（如果我添加更多代码，但我知道这是不好的方法。寻找干净的代码。

const slides = document.querySelector('.s1');
const slideshow = new Slideshow(slides);

const slides2 = document.querySelector('.s2');
const slideshow2 = new Slideshow(slides2);

谢谢

Answer 1

只需要使用querySelectorAll而不是querySelector：

    const slides = document.querySelectorAll('.slides');
    const slideshow = new Slideshow(slides);

    document.querySelector('.slides-nav__item--prev').addEventListener('click', () => slideshow.prev());
    document.querySelector('.slides-nav__item--next').addEventListener('click', () => slideshow.next());