Цикличный carousel slider с повторяющимися элементами

У меня есть слайдер с 3 картинками, который проигрывается автоматически при клике на контейнер. Проблема заключается в том, что после 3 картинки слайдер перемещается в начало, то есть к 1 картинке. Я хочу, чтобы слайдер бесконечно двигался вправо и картинки шли одна за другой. Вот код:

                              <div class="slide">
                                <div class="inner-slider">
                                <div
                                    class="inner-slide"
                                    style="
                                    background-image: url('');
                                    "></div>
                                <div
                                    class="inner-slide"
                                    style="
                                    background-image: url('');
                                    "></div>
                                <div
                                    class="inner-slide"
                                    style="
                                    background-image: url('');
                                    "></div>
                                </div>
                              
                                <div class="curtain"></div>
                            </div>

const slides = document.querySelectorAll(".slide");

let currentSlide = 0;
let timer;


timer = setInterval(() => changeSlide(slides[0]), 2500);

for (const slide of slides) {
  slide.addEventListener("click", () => {
    clearActiveClasses();
    slide.classList.add("active");

    const innerSlides = slide.querySelectorAll(".inner-slide");
    innerSlides.forEach((slide) => (slide.style.transform = "translateX(0%)"));
    currentSlide = 0;
    if (timer) clearInterval(timer);
    timer = setInterval(() => changeSlide(slide), 2500);
  });
}

function clearActiveClasses() {
  for (const slide of slides) {
    slide.classList.remove("active");
  }
}

function changeSlide(slide) {
  const innerSlides = slide.querySelectorAll(".inner-slide");
  currentSlide++;
  if (currentSlide === innerSlides.length) currentSlide = 0;
  innerSlides.forEach(
    (slide) => (slide.style.transform = `translateX(-${100 * currentSlide}%)`)
  );
}

Я также пробовал ставить счетчик и получалось так, что при innerSlides.forEach((slide, index) => (slide.style.transform = translateX(-${100 * count}%))) слайдер уходил вправо, но картинок не было, то есть была пустота