Динамически добавлять следующий / предыдущий братьев и сестер и преобразовывать с чистым javascript

Question

Я сделал слайдер, который правильно берет следующий и предыдущий братьев и сестер в течение l oop и превращает его в два изображения. проблема в том, что у меня больше индекса в l oop, он не работает после 1-го индекса. Кроме того, преобразование не работает динамически.

Полный код: Ручка .

my javascript file

  const carouselSlideLeft: any = document.querySelector('.left-img .slide-item');
  const carouselSlideRight: any = document.querySelector('.right-img .slide-item');
  const SlideImagesLeft: any = document.querySelectorAll('.left-img .slide-item ');
  const SlideImagesRight: any = document.querySelectorAll('.right-img .slide-item');
  const prevBtn: any = document.querySelector('.prev-btn')
  const nextBtn: any = document.querySelector('.next-btn')


  nextBtn.addEventListener('click', function () {
    for (var i = 0; i <= SlideImagesLeft.length; i++) {
      if (SlideImagesLeft[i] == carouselSlideLeft) {
        var previous = SlideImagesLeft[i - 1];
        var next = SlideImagesLeft[i + 1];
        SlideImagesLeft[i].style.transform = 'translateY(-100% ) translateZ(0)'
        next.style.transform = 'translateY(-100% ) translateZ(0)'

      }
    }

    for (var i = 0; i < SlideImagesRight.length; i++) {
      if (SlideImagesRight[i] == carouselSlideRight) {
        var previous = SlideImagesRight[i - 1];
        var next = SlideImagesRight[i + 1];

        SlideImagesRight[i].style.transform = 'translateY(100% ) translateZ(0)'
        next.style.transform = 'translateY(100% ) translateZ(0)'
      }

    }
  })


  prevBtn.addEventListener('click', function () {
    for (var i = 0; i < SlideImagesLeft.length; i++) {
      if (SlideImagesLeft[i - 1]) {
        var previous = SlideImagesLeft[i - 1];
        var next = SlideImagesLeft[i + 1];
        SlideImagesLeft[i].style.transform = 'translateY(0% )  translateZ(0)'
        previous.style.transform = 'translateY(0% ) translateZ(0)'

      }
    }

    for (var i = 0; i < SlideImagesRight.length; i++) {
      if (SlideImagesRight[i - 1]) {
        var previous = SlideImagesRight[i - 1];
        var next = SlideImagesRight[i + 1];
        SlideImagesRight[i].style.transform = 'translateY(0% ) translateZ(0)'
        previous.style.transform = 'translateY(0% ) translateZ(0)'

      }
    }
  })

Я нашел решение о том, как получить прежних / следующих братьев и сестер в l oop из этого вопроса . Сделано точно так же, но это не решает мою проблему должным образом.

Может кто-нибудь подсказать мне, как я могу сделать это динамически и правильно работать с ползунком? В ожидании хорошего решения.

Спасибо