Working the dots

Wenn der User auf einen Navigationspunkt klickt, soll der Slider den zugehörigen Slide anzeigen.

Zuerst holen wir uns die Dots und legen einen EventListener drauf:

const dots = Array.from(carousel.querySelectorAll('.carousel-dot'))

dots.forEach(dot => {
  dot.addEventListener('click', e => {})
})

Wenn auf einen Dot geklickt wird, müssen wir den zugehörigen Slide finden. Also erster Dot - erster Slide, zweiter Dot … und so weiter.

Dazu müssen wir natürlich wissen, welcher Dot geklickt wurde. Das finden wir über den Index des Dot-Arrays heraus.
Wenn der User den ersten Dot geklickt hat, soll dots[0] gleich dot sein. Wir vergleichen mit dem strictly equal operator ===.

dots.forEach(dot => {
  dot.addEventListener('click', e => {
    if (dots[0] === dot) {
      console.log('First dot clicked')
    } else {
      console.log('Another dot clicked')
    }
  })
})

Dasselbe gilt natürlich auch für die anderen Dots. Wir initialisieren eine neue Variable clickedDotIndex, die als Wert den Index des aktuell geklickten Dots erhalten soll. Dann loopen wir durch die Dots und weisen den Index des geklickten Dots der Variable als Wert zu.

dots.forEach(dot => {
  dot.addEventListener('click', e => {
    let clickedDotIndex

    for (let index = 0; index < dots.length; index++) {
      if (dots[index] === dot) {
        clickedDotIndex = index
      }
    }
  })
})

Sobald wir den Index des geklickten Dots haben, können wir ihn dazu nutzen, den zugehörigen Slide zu identifizieren (gleicher Index):

const slideToShow = slides[clickedDotIndex]

Nun wissen wir, welchen Slide wir wollen, also können wir ihn anzeigen, indem wir left ändern:

const slideToShow = slides[clickedDotIndex]
const destination = getComputedStyle(slideToShow).left

contents.style.left = '-' + destination

Anschließend aktualisieren wir is-selected, sonst funktionieren unsere Buttons nicht mehr:

dots.forEach(dot => {
  dot.addEventListener('click', e => {
    // ...
    const currentSlide = contents.querySelector('.is-selected')
    currentSlide.classList.remove('is-selected')

    // Alternative: durch alle slides loopen
    slides.forEach(slide => {
      slide.classList.remove('is-selected')
    })

    slideToShow.classList.add('is-selected')
  })
})

Updating dot state

Auch der aktive Dot muss gekennzeichnet werden. Er erhält ebenso eine Klasse is-selected und wird entsprechend gestylt. Wenn ein neuer Dot geklickt wird, müssen wir is-selected vom aktuell aktiven Dot entfernen und dem neuen Dot zuweisen:

dots.forEach(dot => {
  dot.addEventListener('click', e => {
    // ...
    dots.forEach(d => {
      d.classList.remove('is-selected')
    })
    dot.classList.add('is-selected')
  })
})

Updating dot state when clicking buttons

Wenn der User auf den Vorwärts- oder Zurück-Button klickt, sollten sich die Dots ebenfalls aktualisieren. Den aktuellen Dot finden wir mit querySelector, den nächsten mit nextElementSibling. Dann spielen wir wieder unser add/remove-Spiel:

const dotsContainer = carousel.querySelector('.carousel-dots')

nextButton.addEventListener('click', e => {
  // ...
  // Highlight dot
  const currentDot = dotsContainer.querySelector('is-selected')
  const nextDot = currentDot.nextElementSibling
  currentDot.classList.remove('is-selected')
  nextDot.classList.add('is-selected')
})

Analog wieder für den Zurück-Button:

previousButton.addEventListener('click', e => {
  // ..
  // Highlight dot
  const currentDot = dotsContainer.querySelector('is-selected')
  const previousDot = currentDot.previousElementSibling
  currentDot.classList.remove('is-selected')
  previousDot.classList.add('is-selected')
})

Showing and hiding previous and next buttons

Wenn der User auf den ersten Dot klickt, müssen wir den Zurück-Button verstecken, aber den Vorwärts-Button anzeigen und umgekehrt, wenn er auf den letzten Button klickt, müssen wir den Vorwärts-Button verstecken und den Zurück-Button anzeigen. Klickt er auf den zweiten Dot, müssen beide angezeigt werden. Machen wir das mal Schritt für Schritt:

Wir können die Variable clickedDotIndex verwenden, um herauszufinden, welcher Dot gerade aktuell ist:

dots.forEach(dot => {
  dot.addEventListener('click', e => {
    // ...

    // show/hide buttons
    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')
    }
  })
})