Positioning slides with JavaScript

Aktuell sind alle Slides fix positioniert. Diese fixe Positionierung wollen wir jetzt mit JavaScript dynamisch machen. Als erstes geben wir dem Carousel eine variable Breite:

// alt
.carousel {
  grid-template-columns: 3em 400px 3em;
}

// neu
.carousel {
  grid-template-columns: 3em 80vw 3em;
  @media (width > 600px) {
    grid-template-columns: 3em 50vw 3em;
  }
}

Jetzt passen die Slides natürlich nicht mehr in den Bilderrahmen, aber das werden wir gleich ändern.

Positioning the slides with JavaScript

Wir entfernen die Slides-Positionierung aus dem CSS:

// remove this
.carousel-slide:nth-child(2) {
  left: 400px;
}
.carousel-slide:nth-child(3) {
  left: 800px;
}

Wie sollen nun die neuen Breiten aussehen? left für den zweiten Slide muss den Wert der Breite eines Slides haben. left für den dritten Slide muss den Wert von zwei Slides haben. Wir können die Breite eines Slides mit getBoundingClientRect() auslesen.

const slideWidth = slides[0].getBoundingClientRect().width;

Nun sehen wir uns an, wie die left Werte aussehen müssen:

slides[0].style.left = '0px';
slides[1].style.left = slideWidth + 'px';
slides[2].style.left = slideWidth * 2 + 'px';

Machen wir die Berechnung konsistenter:

slides[0].style.left = slideWidth * 0 + 'px';
slides[1].style.left = slideWidth * 1 + 'px';
slides[2].style.left = slideWidth * 2 + 'px';

Wir können also den Index verwenden, um den korrekten Wert auszurechnen! Dafür nehmen wir eine forEach-Schleife:

const slideWidth = slides[0].getBoundingClientRect().width;
slides.forEach((slide, index) => {
  slide.style.left = slideWidth * index + 'px';
});