Событие клика по слайдеру идет в конце массива

Question

Я пытаюсь создать простой слайдер, используя JavaScript. Итак, вот мой код:

HTML:

  <div class="carousel-container">

    <div class="slides-container">
      <div class="slide">
        <img src="assets/images/image-1.jpg" alt="">
      </div>
      <div class="slide">
        <img src="assets/images/image-3.jpg" alt="">
      </div>
      <div class="slide">
        <img src="assets/images/image-2.jpg" alt="">
      </div>
      <div class="slide">
        <img src="assets/images/image-3.jpg" alt="">
      </div>
    </div>

  </div>

  <div class="carousel-nav">
    <button class="button-previous">Previous</button>
    <button class="button-next">Next</button>
  </div>

Js:

    const slides = document.querySelectorAll('.slide')
    const slidesContainer = document.querySelector('.slides-container')
    const slidesCount = slides.length
    const slideWidth = slides[0].clientWidth

    const prevButton = document.querySelector('.button-previous')
    const nextButton = document.querySelector('.button-next')

    function nextSlide(slide) {
      for (slide = 0; slide < slidesCount; slide++) {
        slidesContainer.style.transform = 'translateX(-' + (slide * slideWidth) + 'px)'
      }
    }

    nextButton.addEventListener('click', function() {
      nextSlide()
    })

Проблема, с которой я столкнулся, заключается в том, что когда я нажимаю на следующую кнопку, ползунок проходит весь конец моего массива, пропуская все изображения между ними.

Каков наилучший способ остановки цикла for на каждом изображении и повторного запуска при нажатии кнопки?

Answer 1

Причина, по которой каждый щелчок пропускается до конца, заключается в следующем: петля for().Вы перебираете все слайдов - генерируете новую translateX координату с каждым проходом - на каждый клик.Оставляя вас с последним значением каждый раз.

В ответе CheapGamer определяется шаблон, позволяющий избежать ловушки цикла for() путем отслеживания текущего индекса «слайда» вне обработчика nextSlide().

let current = 0; // <- independent index reference

function nextSlide(slide) {
      if (current < slidesCount) {
        slidesContainer.style.transform = 'translateX(-' + (current * slideWidth) + 'px)';
        current++;  // <- increment the index
      }
}
// I changed the `slide` reference in `(slide * slideWidth)` to `current`  to reflect the intent of the code

Это позволяет увеличивать вас через карусель до тех пор, пока current не станет равным 3.(Аргумент slide в nextSlide(slide) не обязателен.)

Answer 2

let current = 0;

function nextSlide(slide) {
      if (current < slidesCount) {
        slidesContainer.style.transform = 'translateX(-' + (slide * slideWidth) + 'px)';
        current++;
      }
}

Answer 3

Я, возможно, не совсем понимаю, что вы пытаетесь сделать или почему вы намереваетесь использовать цикл for, но если речь идет только о выборе следующего слайда, вы можете пойти с этим:

var currentSlide = 0;

function nextSlide() {
  //make sure currentSlide is in range
  currentSlide = (currentSlide >= slidesCount) ? 0 : ++currentSlide;

  slidesContainer.style.transform = 'translateX(-' + (currentSlide * slideWidth) + 'px)';
}

nextButton.addEventListener('click', nextSlide);

или немного более гибкий:

var currentSlide = 0;

function nextSlide(direction /* Number */) {
  if(!direction) direction = 1; //default

  setSlide(currentSlide + direction % slidesCount);
}

function setSlide(index) {
  if(index === currentSlide) return;

  //make sure index is in range
  while(index >= slidesCount) index -= slidesCount;
  while(index < 0) index += slidesCount;

  slidesContainer.style.transform = 'translateX(-' + (index * slideWidth) + 'px)';

  currentSlide = index;
}

nextButton.addEventListener('click', function() {
  nextSlide(this.dataset["direction"]); //by using data you don't need two different button classes
});

Но если вы настаиваете на использовании цикла, я боюсь сказать, что в этом случае это неуместно, так как расчет translateX основан на заданном значении.