Javascript: Карусель выдвигается из петли

Question

В настоящее время я строю карусель с ванильным JS, и я заметил, что в отличие от предыдущих каруселей, которые я построил ранее с помощью jQuery, эта часть выдвигает дополнительный слайд из цикла (который я определил с помощью свойства .length).Проблема происходит в обоих направлениях.

Почему это происходит и что я могу сделать, чтобы это исправить?Вот быстрый пример:

let currentSlide = 0
const holder = document.querySelector('.holder')
const totalSlides = holder.querySelectorAll('.holder-child')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')

const moveSlide = slide => {
  const leftPosition = -slide * 100 + 'vw'
  holder.style.left = leftPosition
}

const nextSlide = () => {
  currentSlide = currentSlide + 1
  moveSlide(currentSlide)
  if (currentSlide > totalSlides.length - 1) {
    currentSlide = 0
  }
}

const prevSlide = () => {
  currentSlide = currentSlide - 1
  moveSlide(currentSlide)
  if (currentSlide < 0) {
    currentSlide = totalSlides.length - 1
  }
}

next.addEventListener('click', () => {
  nextSlide()
})

prev.addEventListener('click', () => {
  prevSlide()
})

.flex {
  display: flex;
}

.slideshow {
  position: relative;
  overflow: hidden;
  width: 100vw;
}

.holder {
  position: relative;
  top: 0;
  left: 0;
  width: 500vw;
  transition: left 1s;
}

.holder-child {
  display: flex;
  width: 100vw;
}

.speaker {
  padding: 0 8vw 0 8vw;
}

.controls {
  justify-content: space-between;
}

<h2>Test</h2>
<div class="slideshow">
  <div class="controls flex">
    <p class="prev pointer">prev</p>
    <p class="next pointer">next</p>
  </div>
  <div class=" holder flex">
    <div class="holder-child">
      <p>slide 1</p>
    </div>
    <div class="holder-child">
      <p>slide 2</p>
    </div>
  </div>

JSFiddle: https://jsfiddle.net/5f8cbxdr/

Answer 1

Это выглядит как незначительная логическая проблема, вызванная вызовом moveSlide() перед окончательным вычислением currentSlide во время ваших prevSlide() и nextSlide() методов.

Рассмотрите возможность перемещения вызова moveSlide() в конец ваших функций prevSlide() и nextSlide().Это будет означать, что, когда возникают крайние случаи (т. Е. Ваш currentSlide находится на любом конце диапазона слайдов), последующий вызов moveSlide() приведет к тому, что слайды будут позиционироваться на основе заново отрегулированного значения currentSlide:

let currentSlide = 0
const holder = document.querySelector('.holder')
const totalSlides = holder.querySelectorAll('.holder-child')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')

const moveSlide = slide => {
  const leftPosition = -slide * 100 + 'vw'
  holder.style.left = leftPosition
}

const nextSlide = () => {
  currentSlide = currentSlide + 1
  if (currentSlide > totalSlides.length - 1) {
    currentSlide = 0
  }
  /* Final value for currentSlide now determined, so call moveSlide() 
     to position slides consistently with most up to date currentSlide
     value */
  moveSlide(currentSlide)
}

const prevSlide = () => {
  currentSlide = currentSlide - 1
  if (currentSlide < 0) {
    currentSlide = totalSlides.length - 1
  }
  /* Final value for currentSlide now determined, so call moveSlide() 
     to position slides consistently with most up to date currentSlide
     value */
  moveSlide(currentSlide)
}

next.addEventListener('click', () => {
  nextSlide()
})

prev.addEventListener('click', () => {
  prevSlide()
})

.flex {
  display: flex;
}

.slideshow {
  position: relative;
  overflow: hidden;
  width: 100vw;
}

.holder {
  position: relative;
  top: 0;
  left: 0;
  width: 500vw;
  transition: left 1s;
}

.holder-child {
  display: flex;
  width: 100vw;
}

.speaker {
  padding: 0 8vw 0 8vw;
}

.controls {
  justify-content: space-between;
}

<h2>Test</h2>
<div class="slideshow">
  <div class="controls flex">
    <p class="prev pointer">prev</p>
    <p class="next pointer">next</p>
  </div>
  <div class=" holder flex">
    <div class="holder-child">
      <p>slide 1</p>
    </div>
    <div class="holder-child">
      <p>slide 2</p>
    </div>
  </div>