JavaScript图片切换

Question

请问 goToslide 函数中 这段代码中的 i 和 slide 他们都会成长 差应该都是一样呀 ，为什么会切换下一张图片

(s, i) => (s.style.transform = translateX(${100 * (i - slide)}%))

    <section>
      <div class="slider">
        <div class="slide"><img src="img/img-1.jpg" alt="Photo 1" /></div>
        <div class="slide"><img src="img/img-2.jpg" alt="Photo 2" /></div>
        <div class="slide"><img src="img/img-3.jpg" alt="Photo 3" /></div>
        <div class="slide"><img src="img/img-4.jpg" alt="Photo 4" /></div>
        <button class="slider__btn slider__btn--left">←</button>
        <button class="slider__btn slider__btn--right">→</button>
        <div class="dots"></div>
      </div>
    </section>

    <script>
      const slides = document.querySelectorAll('.slide');
      const btnLeft = document.querySelector('.slider__btn--left');
      const btnRight = document.querySelector('.slider__btn--right');
      const dotContainer = document.querySelector('.dots');

      let curSlide = 0;
      const maxSlide = slides.length - 1;

      const createDots = function () {
        slides.forEach(function (_, i) {
          dotContainer.insertAdjacentHTML(
            'beforeend',
            `<button class="dots__dot" data-slide="<span class="hljs-subst">${i}" ></button>`
          );
        });
      };
      createDots();

      const goToSlide = function (slide) {
        slides.forEach(
          (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
        );
      };
      goToSlide(0);

      const nextSlide = function () {
        if (curSlide === maxSlide) {
          curSlide = 0;
        } else {
          curSlide++;
        }
        console.log(curSlide);
        goToSlide(curSlide);
      };

      const prevSlide = function () {
        if (curSlide === 0) {
          curSlide = maxSlide;
        } else {
          curSlide--;
        }
        goToSlide(curSlide);
      };

      btnRight.addEventListener('click', nextSlide);
      btnLeft.addEventListener('click', prevSlide);
    </script>

Answer 1

切换正常的，题主问题是什么？通过translateX将图片水平平移实现显示隐藏。

i是遍历到的slides的下标，slide是当前要显示的curSlide的值固定的，只有一次相同的机会