const sliders = document.querySelectorAll(".slider");

sliders.forEach((slider) => {
  const sliderItems = Array.from(slider.querySelectorAll(".slider-item"));
  const nextBtn = slider.querySelector(".next");
  const prevBtn = slider.querySelector(".prev");
  let counter = 0;

  const next = () => {
    if (counter < sliderItems.length - 1) {
      counter++;
      updateSlider();
    }
  };

  const prev = () => {
    if (counter > 0) {
      counter--;
      updateSlider();
    }
  };

  const updateSlider = () => {
    sliderItems.forEach((item) => {
      item.style.transform = `translateX(-${counter}00%)`;
    });
  };

  nextBtn.addEventListener("click", next);
  prevBtn.addEventListener("click", prev);
});