Нужно слайдеры в цикле обрабатывать. Выше уже предложили одно из решений, но в нём есть нюанс - создание функций в цикле достаточно дорого по ресурсам (мы же заботимся о наших пользователях?), благо есть альтернатива, в качестве слушателя события может быть не только функция, но и объект с методом handleEvent:
class PrevClickListener {
constructor(track, next) {
this.track = track;
this.next = next;
}
handleEvent() {
const {track, next} = this;
next.removeAttribute('disabled');
track.scrollTo({
left: track.scrollLeft - track.firstElementChild.offsetWidth,
behavior: 'smooth',
});
}
}
class NextClickListener {
constructor(track, prev) {
this.track = track;
this.prev = prev;
}
handleEvent() {
const {track, prev} = this;
prev.removeAttribute('disabled');
track.scrollTo({
left: track.scrollLeft + track.firstElementChild.offsetWidth,
behavior: 'smooth',
});
}
}
class TrackScrollListener {
constructor(track, prev, next) {
this.track = track;
this.prev = prev;
this.next = next;
}
handleEvent() {
const {track, next, prev} = this;
const trackScrollWidth = track.scrollWidth;
const trackOuterWidth = track.clientWidth;
prev.removeAttribute('disabled');
next.removeAttribute('disabled');
if (track.scrollLeft <= 0) {
prev.setAttribute('disabled', '');
}
if (track.scrollLeft === trackScrollWidth - trackOuterWidth) {
next.setAttribute('disabled', '');
}
}
}
const sliders = document.querySelectorAll('[data-slider]');
for (const slider of sliders) {
const track = slider.querySelector('[data-slider-track]');
const prev = slider.querySelector('[data-slider-prev]');
const next = slider.querySelector('[data-slider-next]');
if (!track || !prev || !next) continue;
prev.addEventListener('click', new PrevClickListener(track, next));
next.addEventListener('click', new NextClickListener(track, prev));
track.addEventListener('scroll', new TrackScrollListener(track, prev, next));
}