Bootstrap 4 Schnellstart – Slider / Karussell

Slider / Karussell

Slider und Karussells haben in Bootstrap nichts mit dem Jahrmarkt zu tun. Man kann sich diese eher als Dia-Show vorstellen und zwischen Slider/Karussells gibt es keinen Unterschied.

Um so eine moderne Dia-Show auf der Webseite zu integrieren, benötigen wir diverse Attribute.

Hier ein Code-Beispiel:

&lt;div class="carousel slide" data-ride="carousel"&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="carousel-item active"&gt;
     &lt;img src="..." class="d-block w-100"&gt;
    &lt;/div&gt;
    &lt;div class="carousel-item"&gt;
      &lt;img src="..." class="d-block w-100"&gt;
    &lt;/div&gt;
    &lt;div class="carousel-item"&gt;
      &lt;img src="..." class="d-block w-100"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Grundaufbau

1. Das übergeordnete div enthält die zwei Klassen carousel und slide, sowie ein data-ride Attribut mit dem Wert carousel. Damit kann Bootstrap den Slider starten und korrekt anzeigen.

<div class="carousel slide" data-ride="carousel">

2. Darunter wird ein div-Element mit der Klasse carousel-inner bereitgestellt, welches die Inhalte bereithält.

<div class="carousel-inner">

3. Jedes Einzelbild, bekommt ein separates div-Element mit der Klasse carousel-item. WICHTIG: Ein Element davon benötigt zusätzlich die Klasse active!

<div class="carousel-item active">

4. Das Bild mit dem Inhalt benötigt zusätzlich die Klassen d-block und w-100.

<img src="..." class="d-block w-100">

Damit ist der Slider schon eingerichtet, aber das ist noch nicht alles! Du kannst Buttons, eine Fortschrittsanzeige und sogar Zusatzinformationen Anzeigen.

Steuerknöpfe

Starten wir mit den Steuerbuttons, unter dem div-Element mit der Klasse carousel-inner erstellst du folgende Elemente:

&lt;a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"&gt;
  &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"&gt;
  &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
&lt;/a&gt;

HINWEIS: Damit das funktioniert, benötigt dein Slider eine id. In dem Beispiel wäre das die id="carousel1".

Für den "rückwärts/links" und "vorwärts/rechts"-Knopf, machen wir jeweils folgende Schritte:

1. Eigentlich sind das nur zwei Links mit besonderen Attributen. Das a-Element erhält die Klasse carousel-control-prev oder carousel-control-next sowie das Attribut data-slide mit dem Wert prev oder next, je nachdem ob es vorwärts oder rückwärts gehen soll.

<a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev">

Das span Element ist dann "nur" das Icon und wird über die Klasse carousel-control-prev-icon oder carousel-control-next-icon gezeigt.

<span class="carousel-control-prev-icon"></span>

Fortschrittsbalken

Möchtest du Anzeigen, wie viele Bilder es gibt und welches davon gerade an der Reihe ist, kannst du über dem div-Element mit der Klasse carousel-inner folgendes Listen-Element hinzufügen:

&lt;ol class="carousel-indicators"&gt;
  &lt;li data-target="#carousel1" data-slide-to="0" class="active"&gt;&lt;/li&gt;
  &lt;li data-target="#carousel1" data-slide-to="1"&gt;&lt;/li&gt;
  &lt;li data-target="#carousel1" data-slide-to="2"&gt;&lt;/li&gt;
&lt;/ol&gt;

HINWEIS: Damit das funktioniert, benötigt dein Slider eine id. In dem Beispiel wäre das die id="carousel1".

1. Wichtig ist Klasse carousel-indicators auf dem ol-Element:

<ol class="carousel-indicators">

2. Jedes Element bekommt dann folgende Informationen:

<li data-target="#carousel1" data-slide-to="1"></li>

Bildbeschreibung

Unter jedem img-Element kannst du optional ein div-Element mit den Klassen carousel-caption d-none d-md-block hinzufügen. In dieses div kannst du dann HTML-Inhalte zur Beschreibung des aktuellen Bildes hinzufügen:

&lt;div class="carousel-caption d-none d-md-block"&gt;
  &lt;h5&gt;Kunde 1&lt;/h5&gt;
  &lt;p&gt;”Das ist das beste Produkt, was ich je gesehen habe!”&lt;/p&gt;
&lt;/div&gt;

Den Slider in seiner vollen Pracht kannst du in dieser Übung bestaunen: