Всем привет, ребят подскажите пожалуйста как переделать в querySelectorall , так как получается у меня 5 одинаковых слайдеров а кнопки работают только для одного , для первого.
const slider = document.querySelector("[data-slider]");
const track = slider.querySelector("[data-slider-track]");
const prev = slider.querySelector("[data-slider-prev]");
const next = slider.querySelector("[data-slider-next]");
if (track) {
prev.addEventListener("click", () => {
next.removeAttribute("disabled");
track.scrollTo({
left: track.scrollLeft - track.firstElementChild.offsetWidth,
behavior: "smooth"
});
});
next.addEventListener("click", () => {
prev.removeAttribute("disabled");
track.scrollTo({
left: track.scrollLeft + track.firstElementChild.offsetWidth,
behavior: "smooth"
});
});
track.addEventListener("scroll", () => {
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", "");
}
});
}// JavaScript Document