Как реализовать слушатель событий по массиву?

Question

[Hastes1234]

Здравствуйте. Используя нативный JS, хочу реализовать простейший слайдер.
хотел узнать, как можно сделать так, чтобы на экране было 4 элемента, а остальные были спрятаны с помощью класса, таким образом, чтобы прокручивались все элементы по очереди. В общем, обычный простой слайдер. Спасибо!

const nextArr = document.querySelector(".slider__arrow_next");
      const prevArr = document.querySelector(".slider__arrow_prev");
      const arrSlides = document.getElementsByClassName("slider__slide");

      for (let index = 0; index < arrSlides.length; index++) {
        prevArr.addEventListener("click", () => {
          arrSlides[index].classList.toggle("slider__slide_hide");
        });
        console.log(index);
        
      }

      for (let index = 0; index < arrSlides.length; index++) {
        nextArr.addEventListener("click", () => {
          arrSlides[index].classList.toggle("slider__slide_hide");
        });
      }

Comments

[WapSter]

Так переменная index у тебя не dom элемент, а ты пытаешься получить список классов.

[Hastes1234]

WapSter, я думал, что проходит итерация по массиву с DOM элементами, разве нет?

[WapSter]

Hastes1234, arrSlides[index]

[Rustam Azizov]

Hastes1234, нет, это индекс, то есть число. Ты его к нулю приравниваешь в цикле, а потом ещё и операция инкремента его увеличивает на 1, посмотри внимательно. Чтоб получить элемент массива нужно использовать индексатор:
arrSlides[index]...

[WapSter]

Ну а вообще ты пытаешься задать обработчик несколько раз по сути один и тот же и у тебя ничего не выйдет, так как сработает только на последнем слайде.

Answer 1

[Арсений Матыцин]

Ты с какой-то не той стороны зашел.

Тебе надо получить массив элементов, и гонять в его диапазоне туда-сюда (или переносить элементы из конца в начало и наоборот для бесконечного цикла) элементы.

А, чтобы показать несколько элементов, тебе стоит по клику на стрелку, инкрементировать (например) индекс активного элемента и от него проходится в n-диапазоне (заданном или расчитанном) по элементам, которым ты будешь добавлять класс активного отображения.

Это примерно в том ключе, что ты делаешь, звучит сложно, а код никто в здравом уме тебе писать не будет, потому что реализаций слайдером на нативном JS и более того на html + css (без JS) в интернете полно.

Comments

[Hastes1234]

я уже понял, что где-то свернул не туда и решил попробовать еще один вариант. Оцените его, пожалуйста.

console.log(value[1]);
const q = 1
      const slidesWrapper = document.getElementsByClassName("slider__slide");
      slidesWrapper[q].style.backgroundImage =
        `url` +
        `${`(http://api...../${value[1]})`}`;

Смысл в том, что я получаю картинки через API. Подумал сделать так, чтобы при нажатии на кнопку менялись две переменные ( q и та, что в api ). таким образом, будут меняться картинки.

[Арсений Матыцин]

Hastes1234, не лучше)

Лучший опыт — чужой опыт. Открой поисковик, поищи готовые скрипты, почитай, пойми, попробуй скопировать, потом попробуй сам написать. И когда въедешь, пиши с нуля.

Ты сейчас пытаешься изобрести велосипед, но уже второй раз изобрел пистолет, который выстрелил тебе в ногу.