Switching slides with JavaScript

Bei einem Klick auf den rechten Button soll das Carousel den nächsten Slide anzeigen, bei einem Klick auf den linken Button den vorhergehenden.

Zuerst müssen wir zwischen dem rechten und dem linken Button unterscheiden. Wir geben den Buttons eine Klasse previous-button und next-button mit.

<div class="carousel">
  <button class="carousel-button previous-button">...</button>
  <div class="carousel-contents-container">...</div>
  <button class="carousel-button next-button">...</button>
  <div class="carousel-dots">...</div>
</div>

Dann selektieren wir die ersten Elemente:

• den Slider selbst
• und die beiden Buttons

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

Clicking the next button

Wenn der next-button geklickt wird, wollen wir den nächsten Slide sehen. Dafür müssen wir zuerst wissen, welcher Slide gerade angezeigt wird. Der einfachste Weg, JavaScript zu sagen, welcher Slide gerade angezeigt wird, führt über eine Klasse. Wir geben also dem ersten Slide die Klasse is-selected mit.

<ul class="carousel-contents">
  <li class="carousel-slide is-selected">...</li>
  <li class="carousel-slide">...</li>
  <li class="carousel-slide">...</li>
</ul>

Den angezeigten Slide erhalten wir mit querySelector. Um die Suche einzugrenzen, definieren wir noch die Liste der Slides:

const contents = carousel.querySelector('.carousel-contents')

nextButton.addEventListener('click', e => {
  const currentSlide = contents.querySelector('.is-selected')
  console.log(currentSlide)
})

Den nächsten Slide erhalten wir mit nextElementSibling:

nextButton.addEventListener('click', e => {
  const currentSlide = contents.querySelector('.is-selected')
  const nextSlide = currentSlide.nextElementSibling
  console.log(nextSlide)
})

Als nächstes wollen wir die Slides anzeigen. Der zweite Slide hat die Eigenschaft left: 400px;. Um den zweiten Slide anzuzeigen, müssen wir left auf -400px setzen. Analog der dritte Slide, der 800px versetzt ist.
Wir wissen in der Regel nicht, welcher Slide als nächstes kommt, daher holen wir uns den Wert left mit getComputedStyle():

nextButton.addEventListener('click', e => {
  const currentSlide = contents.querySelector('.is-selected')
  const nextSlide = currentSlide.nextElementSibling
  const destination = getComputedStyle(nextSlide).left
  console.log(destination)
})

Diesen Wert machen wir nun zu einem negativen und weisen ihm contents zu:

nextButton.addEventListener('click', e => {
  const currentSlide = contents.querySelector('.is-selected')
  const nextSlide = currentSlide.nextElementSibling
  const destination = getComputedStyle(nextSlide).left

  contents.style.left = '-' + destination
})

Als nächstes müssen wir is-selected vom “alten” Slide entfernen und dem neuen zuweisen.

nextButton.addEventListener('click', e => {
  const currentSlide = contents.querySelector('.is-selected')
  const nextSlide = currentSlide.nextElementSibling
  const destination = getComputedStyle(nextSlide).left

  contents.style.left = `-${destination}`
  currentSlide.classList.remove('is-selected')
  nextSlide.classList.add('is-selected')
})

Analog machen wir das alles für den Zurück-Button:

previous -
  button.addEventListener('click', e => {
    const currentSlide = contents.querySelector('.is-selected')
    const previousSlide = currentSlide.previousElementSibling
    const destination = getComputedStyle(previousSlide).left

    contents.style.left = '-' + destination
    currentSlide.classList.remove('is-selected')
    previousSlide.classList.add('is-selected')
  })

Hiding the previous and next button

Wenn wir auf dem ersten Slide sind, können wir nicht zurückblättern. Und vom letzten Slide aus geht es nicht weiter. Es ist daher sinnvoll, beim ersten Slide den Zurück-Button und beim letzten Slide den Vorwärts-Button transparent zu gestalten oder überhaupt auszublenden. Wir können den Button mit dem Attribut hidden verstecken.

Beim Laden der Seite erscheint der erste Slide, daher fügen wir im HTML dem Zurück-Button das Attribut hidden hinzu.

<button class="carousel-button previous-button" hidden>...</button>

Sobald der User einmal auf den Vorwärts-Button geklickt hat, muss der Zurück-Button wieder angezeit werden:

nextButton.addEventListener('click', e => {
  // ...
  // Show the previous button
  previousButton.removeAttribute('hidden')
})

Umgekehrt: wenn wir den letzten Slide erreicht haben, sollte der Vorwärts-Button versteckt werden. Wir müssen also abklären, ob nach dem Slide noch weitere Slides kommen oder ob es der letzte in der Reihe ist. Wie machen wir das? Wir prüfen einfach, ob der Slide noch einen nextElementSibling hat. Wenn nein, dann verstecken wir den Vorwärts-Button.

nextButton.addEventListener('click', e => {
  // ...
  // Hides the next button
  if (!nextSlide.nextElementSibling) {
    nextButton.setAttribute('hidden', true)
  }
})

Geht der User wieder zurück, müssen wir den Button wieder anzeigen:

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

Hat der User wieder bis zum ersten Slide zurückgeblättert, muss das Attribut wieder gesetzt werden. Wir prüfen also, ob es einen vorhergehenden Slide gibt:

previousButton.addEventListener('click', e => {
  // ...
  // Hides the previous button
  if (!previousSlide.previousElementSibling) {
    previousButton.setAttribute('hidden', true)
  }
})