ES6 类，同一页面上的两个滑块具有相同的选择器类

问：

我正在重构一个脚本，其中我正在构建一个滑块。在同一页面中，我希望能够显示两个具有相同类的滑块来选择它们 （.slider）。我设法初始化了两个滑块，但只有页面上的第二个滑块有效。当我单击第一个滑块中的箭头时，它会作用于页面上的第二个滑块...... 谢谢大家！

JS系列

export default class Slider {
    sliders: NodeListOf<HTMLElement> | null = null;
    slides!: HTMLElement;
    current: Element | undefined;
    caption!: HTMLElement;
    prev: Element | undefined;
    next: Element | undefined;

    constructor() {
        this.sliders = document.querySelectorAll('.slider');

        if (this.sliders.length) {
            this.sliders.forEach((slider: HTMLElement) => {
                this.slides = slider.querySelector(
                    '.slider__inner'
                ) as HTMLElement;
                let prevButton = slider.querySelector(
                    '.slider__controls-prev'
                ) as HTMLSpanElement;
                let nextButton = slider.querySelector(
                    '.slider__controls-next'
                ) as HTMLSpanElement;

                prevButton.addEventListener('click', () => this.move('prev'));
                nextButton.addEventListener('click', () => this.move());
                console.log(prevButton, nextButton);

                this.init(slider);
                this.applyClasses();
                this.setCaption();
            });
        }       
    }

    init(slider: HTMLElement): void {
        this.current =
            slider.querySelector('.slider__item-current') ||
            (this.slides.firstElementChild as HTMLLIElement);
        this.caption = slider.querySelector(
            '.slider__item-caption'
        ) as HTMLElement;
        this.prev =
            this.current.previousElementSibling ||
            (this.slides.lastElementChild as HTMLLIElement);
        this.next =
            this.current.nextElementSibling ||
            (this.slides.firstElementChild as HTMLLIElement);
    }

    applyClasses(): void {
        this.current?.classList.add('slider__item-current');
        this.prev?.classList.add('slider__item-prev');
        this.next?.classList.add('slider__item-next');
    }

    setCaption(): void {
        this.caption.textContent = this.current?.querySelector('figcaption')?.textContent;
    }

    move(direction?: string): void {
        const classesToRemove: string[] = [
            'slider__item-prev',
            'slider__item-current',
            'slider__item-next',
        ];
        this.prev?.classList.remove(...classesToRemove);
        this.current?.classList.remove(...classesToRemove);
        this.next?.classList.remove(...classesToRemove);

        if (direction === 'prev') {
            [this.prev, this.current, this.next] = [
                this.prev?.previousElementSibling ||
                    (this.slides.lastElementChild as HTMLElement),
                this.prev,
                this.current,
            ];
        } else {
            [this.prev, this.current, this.next] = [
                this.current,
                this.next,
                this.next?.nextElementSibling ||
                    (this.slides.firstElementChild as HTMLElement),
            ];
        }

        this.applyClasses();
        this.setCaption();
    }
}

HTML（智能模板）

<div class="slider">
            <div class="slider__wrapper">
                <ul class="slider__inner">
                    {{foreach from=$element.diaporama.images item="diapo"}}
                        <li class="slider__item">
                            <figure>
                                {{if $diapo.texte != ""}}
                                    {{assign var=alt value=$diapo.texte|html}}
                                {{/if}}
                                {{if $diapo.author != ""}}
                                    {{assign var=auteur value=$diapo.author|html}}
                                    {{assign var=alt value="`$alt` ©`$auteur`"}}
                                {{/if}}
                                <img loading="lazy" 
                                srcset="{{$diapo.url|image_bunny:cw480}} 480w,
                                        {{$diapo.url|image_bunny:cw600}} 600w,
                                        {{$diapo.url|image_bunny:cw1204}} 1204w"
                                sizes="(min-width: 767px) 600px,
                                    (min-width: 1184px) 1204px,
                                    480px" 
                                src="{{$diapo.url|image_bunny:cw480}}" alt="{{$alt|utf2asc|html_entity_decode|html}}">
                                <figcaption>
                                    {{if $diapo.texte != ""}}
                                        {{$diapo.texte|replace:"<p>":""|replace:"</p>":""}}
                                    {{else}}
                                        {{$diapo.titre|replace:"<p>":""|replace:"</p>":""}}
                                    {{/if}}
                                    {{if $auteur != ""}}
                                        <span>&copy {{$auteur}}</span>
                                    {{/if}}
                                </figcaption>
                            </figure>
                        </li>
                    {{/foreach}}
                </ul>
                <div class="slider__controls">
                    <span class="slider__controls-prev picto-chevron"></span>
                    <span class="slider__controls-next picto-chevron"></span>
                </div>
            </div>
            <div class="slider__item-caption"></div>
        </div>