Carousel – HTML and CSS

Anatomy of a carousel

Carousels/Slider bestehen aus einer Liste von Inhalten, die horizontal angeordnet sind. Sie enthalten vier Komponenten:

• einen nach-links/zurück-Button
• einen Hauptbereich für den Inhalt
• einen nach-rechts/vorwärts-Button
• eine Navigation (Punkte, …)

Dafür benötigen wir folgendes HTML:

<div class="carousel">
  <button class="carousel-button">...</button>
  <ul class="carousel-contents">
    ...
  </ul>
  <button class="carousel-button">...</button>
</div>

Contents of a carousel

Der Container-”Track” enthält eine Liste von Inhalten. Da es eine Liste ist, sollten wir auch ein entsprechend semantisches HTML-Element dafür verwenden, also <ul> oder <ol>.
Die einzelnen Komponenten dieser Liste nennen wir einen Slide.

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

Der Slider enthält ein verlinktes Bild pro Slide:

<li class="carousel-slide">
  <a href="#">
    <img src="https://picsum.photos/id/95/400/300" alt="" />
  </a>
</li>
<li class="carousel-slide">
  <a href="#">
    <img src="https://picsum.photos/id/70/400/300" alt="" />
  </a>
</li>
<li class="carousel-slide">
  <a href="#">
    <img src="https://picsum.photos/id/93/400/300" alt="" />
  </a>
</li>

Ohne jedes CSS würden die Slides untereinander angeordnet sein, da es sich hier ja um eine Liste handelt. Für die Darstellung in einem Slider möchten wir sie üblicherweise nebeneinander anordnen. Dafür gibt es verschiedene Möglichkeiten, z.B.:

• float für jeden Slide
• flexbox für jeden Slide
• position: absolute für jeden Slide

Für diesen Slider verwenden wir position: absolute;. Das bedeutet auch, dass wir der Liste ein position: relative; mitgeben müssen. Damit stapeln wir die Bilder in einem ersten Schritt:

.carousel-contents {
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel-slide {
  position: absolute;
  width: inherit;
  height: inherit;
}

Im nächsten Schritt positionieren wir die Slides nebeneinander. Der zweite Slide ist 400px rechts vom ersten, der dritte Slide ist 800px rechts vom ersten. Das heißt, left ist 400 bzw. 800px.

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

Natürlich wollen wir immer nur einen Slide anzeigen. Dazu benötigen wir einen extra Container für die Inhalte, den wir auf overflow: hidden; setzen. Der Container dient quasi als Bilderrahmen:

<div class="carousel-contents-container">
  <ul class="carousel-contents">
    ...
  </ul>
</div>

.carousel-contents-container {
  overflow: hidden;
}

Styling the slide content

Nun richten wir noch den Inhalt der Slides ein bisschen her:

.carousel-slide > a {
  display: block;
  width: inherit;
  height: inherit;
}
.carousel-slide img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  object-position: center center;
}

Switching slides

Um die Slides anzuzeigen, ändern wir einfach die Eigenschaft left von carousel-content:

• Um den zweiten Slide anzuzeigen, setzen wir carousel-content left auf -400px.
• Um den dritten Slide anzuzeigen, setzen wir carousel-content left auf -800px.

(Besser vorstellen kann man sich das, wenn man in den DevTools overflow: hidden im .carousel-contents-container deakviert. Dann sind alle Slides zu sehen. Mit left: xx kann man die verschiedenen Positionen ausprobieren.)

The dots

Die Dots zeigen uns zwei Dinge:

• die Anzahl der Slides
• den aktuell ausgewählten Slide

Wir können auf die Dots klicken, um einen Slide auszuwählen, daher müssen wir dafür ein <button> Element verwenden:

<div class="carousel-dots">
  <button class="carousel-dot"></button>
  <button class="carousel-dot"></button>
  <button class="carousel-dot"></button>
</div>