Задать вопрос
@fom4ik666

Сталкивался кто-нибудь, как переделать из querySelector в querySelectorall?

Всем привет, ребят подскажите пожалуйста как переделать в 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
  • Вопрос задан
  • 79 просмотров
Подписаться 1 Простой Комментировать
Решение пользователя Николай К ответам на вопрос (2)
@Delta01
@de1ta01 пиши, помогу с вёрсткой =)
const sliders = document.querySelectorAll("[data-slider]");

sliders.forEach(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.disabled = false;
			// next.removeAttribute("disabled");

			track.scrollTo({
				left: track.scrollLeft - track.firstElementChild.offsetWidth,
				behavior: "smooth"
			});
		});

		next.addEventListener("click", () => {
			prev.disabled = false;
			// 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.disabled = false;
			next.disabled = false;
			// prev.removeAttribute("disabled");
			// next.removeAttribute("disabled");

			if (track.scrollLeft <= 0) prev.disabled = true; //prev.setAttribute("disabled", "");
			if (track.scrollLeft === trackScrollWidth - trackOuterWidth) next.disabled = true; //next.setAttribute("disabled", "");
		});

	};
});
Ответ написан