Carousel - Animations

Wir wechseln die Slides mit der Eigenschaft left. Darauf könnten wir ein transition anwenden, um den Slider zu animieren.

.carousel-contents {
  transition: left 0.3s ease-out;
}

Allerdings produziert diese Animation jank. Um smoothe Animationen zu erzeugen, sollten wir transform verwenden.

Switching slides with transform

Um Slides mit transform zu wechseln, brauchen wir zwei Dinge:

1. Wir müssen den richtigen transform Wert mit JavaScript setzen.
2. Wir müssen eine transition für die transform Eigenschaft erstellen.

Der korrekte Wert für transform ist derselbe wie für left:

// remove this
contents.style.left = '-' + destination;

// replace with this
contents.style.transform = 'translateX(-' + destination + ')';

Im CSS-File ersetzen/ergänzen wir folgendes:

.carousel-contents {
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}