How to implement an event listener on an array?

Question

JavaScript

Hello. Using native JS, I want to implement a simple slider.
I wanted to know how you can make it so that there are 4 elements on the screen, and the rest are hidden using a class, so that all elements scroll in turn. In general, the usual simple slider. Thank you!

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");
        });
      }

Answer 1

You came from the wrong side.
You need to get an array of elements, and drive elements back and forth in its range (or transfer elements from end to beginning and vice versa for an infinite loop) elements.
And in order to show several elements, you should, by clicking on the arrow, increment (for example) the index of the active element and from it it is passed in the n-range (given or calculated) through the elements to which you will add the active display class.
It sounds complicated in the way that you are doing, and no one in their right mind will write code for you, because there are a lot of slider implementations in native JS and, moreover, in html + css (without JS) on the Internet.