Previous and next buttons

Kümmern wir uns um die Arrow Buttons: den Code dafür finden wir in allen drei EventListenern:

nextButton.addEventListener('click', e => {
  // ...
  // show the previousButton
  previousButton.removeAttribute('hidden')

  // hide the nextButton if we are on the last slide
  if (!nextSlide.nextElementSibling) {
    nextButton.setAttribute('hidden', true)
  }
})

previousButton.addEventListener('click', e => {
  // ...
  // show the nextButton
  nextButton.removeAttribute('hidden')

  // hide the previousButton if we are on the first slide
  if (!previousSlide.previousElementSibling) {
    previousButton.setAttribute('hidden', true)
  }
})

dotsContainer.addEventListener('click', e => {
  // ...
  showHideArrowButtons(clickedDotIndex)
})

// which is in fact this function:
function showHideArrowButtons(clickedDotIndex) {
  if (clickedDotIndex === 0) {
    previousButton.setAttribute('hidden', true)
    nextButton.removeAttribute('hidden')
  } else if (clickedDotIndex === dots.length - 1) {
    previousButton.removeAttribute('hidden')
    nextButton.setAttribute('hidden', true)
  } else {
    previousButton.removeAttribute('hidden')
    nextButton.removeAttribute('hidden')
  }
}

Können wir die Funktion auch in den ersten beiden EventListenern verwenden? Dort steht uns die Variable clickedDotIndex nicht zur Verfügung. Allerdings entspricht der Wert dieser Variablen dem Index des Slides, den wir anzeigen wollen. Wenn wir diesen Index kennen, können wir die Funktion verwenden. Also machen wir uns auf die Suche.

nextButton.addEventListener('click', e => {
  // ...
  const nextSlideIndex = slides.findIndex(slide => slide === nextSlide)

  showHideArrowButtons(nextSlideIndex)
})

Dito für den previousButton:

previousButton.addEventListener('click', e => {
  // ...
  const previousSlideIndex = slides.findIndex(slide => slide === previousSlide)

  showHideArrowButtons(previousSlideIndex)
})

Renaming clickedDotIndex

Der Variablenname clickedDotIndex passt jetzt nicht mehr, denn in den ersten beiden EventListenern übergeben wir ja nicht den Index einen geklickten Dots, sondern den Index eines Slides. Wir ändern also clickedDotIndex zu targetSlideIndex. So können wir die drei EventListener mental besser verlinken.

function showHideArrowButtons(targetSlideIndex) {
  if (targetSlideIndex === 0) {
    previousButton.setAttribute('hidden', true)
    nextButton.removeAttribute('hidden')
  } else if (targetSlideIndex === dots.length - 1) {
    previousButton.removeAttribute('hidden')
    nextButton.setAttribute('hidden', true)
  } else {
    previousButton.removeAttribute('hidden')
    nextButton.removeAttribute('hidden')
  }
}

Die next/previous EventListener müssen wir hier nicht ändern, aber den dotContainer EventListener:

dotsContainer.addEventListener('click', e => {
  // ...
  const targetSlideIndex = dots.findIndex(d => d === dot)
  const slideToShow = slides[targetSlideIndex]

  showHideArrowButtons(targetSlideIndex)
})