sliderを一つのページに複数段表示する方法

Question

sliderを一つのページに複数個表示する方法

ひとつのページをtabで分けて，それぞれのtabに画像をsliderで表示したいのですが，
2タブ目から上手く表示できません。どのようにすれば良いのでしょうか？

発生している問題・エラーメッセージ

複数のsliderが表示できない

該当のソースコード

{
class SliderClip {
constructor(el) {
this.el = el;
this.Slides = Array.from(this.el.querySelectorAll('li'));
this.Nav = Array.from(this.el.querySelectorAll('nav a'));
this.totalSlides = this.Slides.length;
this.current = 0;
this.autoPlay = true; //true or false
this.timeTrans = 4000; //transition time in milliseconds
this.IndexElements = [];

		for(let i=0;i<this.totalSlides;i++) {
			this.IndexElements.push(i);
  }
  

		this.setCurret();
		this.initEvents();
	}
	setCurret() {
		this.Slides[this.current].classList.add('current');
		this.Nav[this.current].classList.add('current_dot');
	}
	initEvents() {
		const self = this;

		this.Nav.forEach((dot) => {
			dot.addEventListener('click', (ele) => {
				ele.preventDefault();
				this.changeSlide(this.Nav.indexOf(dot));
			})
		})

		this.el.addEventListener('mouseenter', () => self.autoPlay = false);
		this.el.addEventListener('mouseleave', () => self.autoPlay = true);

		setInterval(function() {
			if (self.autoPlay) {
				self.current = self.current < self.Slides.length-1 ? self.current + 1 : 0;
				self.changeSlide(self.current);
			}
		}, this.timeTrans);

	}
	changeSlide(index) {

		this.Nav.forEach((allDot) => allDot.classList.remove('current_dot'));

		this.Slides.forEach((allSlides) => allSlides.classList.remove('prev', 'current'));

		const getAllPrev = value => value < index;

		const prevElements = this.IndexElements.filter(getAllPrev);

		prevElements.forEach((indexPrevEle) => this.Slides[indexPrevEle].classList.add('prev'));

		this.Slides[index].classList.add('current');
		this.Nav[index].classList.add('current_dot');
	}
}

const slider = new SliderClip(document.querySelector('.slider'));

}

試したこと

補足情報（FW/ツールのバージョンなど）

Answer 1

こうするとどうでしょうか。

document.querySelectorAll('.slider').forEach( x => new SliderClip(x) );

Comments

[cuma]

ご回答ありがとうございます。
残念ながらそちらでは画像が消えてしましました。

[Lhankor_Mhy]

当方の環境では上手くいきました。

https://codepen.io/lhankor_mhy/pen/WNoejQp
↑このページで、cumaさんの環境では「画像が消える」という問題が発生しますか？

もし、問題が発生しないのであれば、ご提示いただいていない部分に原因があると思われますので、「画像が消える」というそのコードをご提示ください。