Carousel

CAROUSEL

Was ist zu tun?

  1. Was muss logisch passieren?
  2. Welches HTML brauche ich?
  3. Welches CSS brauche ich?
  4. Wie schreibe ich das JS, Schritt für Schritt, damit die Komponente funktioniert?
Was muss logisch passieren? Was brauche ich?

Ich brauche:

  • einen Container für das aktuelle Bild
  • einen Vor- und einen Zurück-Button
  • eine Bullet-Navigation
Wie "verbinde" ich einen Slide mit einem Dot?

Kurz gesagt: indem ich den Index vergleiche. Die Slides sind ein Array mit Index, die Dots ebenso. Ich muss den Index vom Dot suchen, der geklickt wurde, der currentSlide muss dann denselben Index haben wie der Dot.

(Im Script loopen wir nicht über den Index, der ist hier nur zur Erklärung inkludiert. Die Zeile if (dots[index] === dot) bezieht sich (implizit) auf den (standardmäßig enthaltenen) Index des Dots im Array.)

dots.forEach((dot, index) => {
  dot.addEventListener('click', e => )
    let clickedDotIndex;
    for (let cIndex = 0; cIndex < dots.length; cIndex++) {
      if (dots[index] === dot) {
      clickedDotIndex = index;
      };
    };
    const slideToShow = slides[clickedDotIndex];
  })