🛠 Carousel: Previous and next buttons

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

🛠 Carousel: Previous and next buttons

Here’s the code to show and hide arrow buttons in all three event listeners:

nextButton.addEventListener('click', event => {
  // ...
  // Shows previous button
  previousButton.removeAttribute('hidden')

  // Hides next button
  if (!nextSlide.nextElementSibling) {
    nextButton.setAttribute('hidden', true)
  }
})

previousButton.addEventListener('click', event => {
  // ...
  // Shows next button
  nextButton.removeAttribute('hidden')

  // Hides previous button
  if (!previousSlide.previousElementSibling) {
    previousButton.setAttribute('hidden', true)
  }
})

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

The one in dotsContainer is the shortest and easiest to understand. But can previousButton and nextButton's event listener use the same function?

To answer the question, we need to look at showHideArrowButtons once more.

Looking at showHideArrowButtons again

const 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')
  }
}

Here, we see showHideArrowButtons take in a clickedDotIndex. This clickedDotIndex does not exist in previousButton's or nextButton's event listener.

But we know clickedDotIndex is the same value as the index of the slide want to move to. We can use showHideArrowButtons in nextButton's event listener if we know the index value for nextSlide.

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

  showHideArrowButtons(nextSlideIndex)
})

We can also use showHideArrowButtons in previousButton's event listener if we know the index value of previousSlide.

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

  showHideArrowButtons(previousSlideIndex)
})

Renaming clickedDotIndex

clickedDotIndex used to be an excellent variable name. Unfortunately, this name doesn’t make sense when we use showHideArrowButtons in previousButton and nextButton's event listener. (They passed in the index of a slide instead).

To make showHideArrowButtons easier to understand, we can change clickedDotIndex to targetSlideIndex. This tiny vocabulary change lets you link up all three event listeners mentally.

const 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')
  }
}

Using showHideArrowButtons:

// In next button's event listener
nextButton.addEventListener('click', event => {
  // ...
  const nextSlideIndex = slides.findIndex(slide => slide === nextSlide)

  showHideArrowButtons(nextSlideIndex)
})

// In previous button's event listener
previousButton.addEventListener('click', event => {
  // ...
  const previousSlideIndex = slides.findIndex(slide => slide === previousSlide)

  showHideArrowButtons(previousSlideIndex)
})

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

  showHideArrowButtons(targetSlideIndex)
})