Carousel

In Bootstrap v6.0.0 neu aufgebaut

Ein Slider für Bilder, Produkte oder beliebige Inhalte – in Bootstrap 6 auf Basis von CSS Scroll Snap komplett neu gebaut.

Das Carousel gab es schon in Bootstrap 5. In Version 6 sind die Folien ein echter Scroll-Container: Wischen, Ziehen per Touch, Schwung und Scrollen mit der Tastatur liefert der Browser. JavaScript kümmert sich nur noch um Autoplay, Vor/Zurück-Buttons, Indikatoren und das Mitführen der aktiven Folie.

Mehrere Folien: Anzahl, Abstand und Vorschau der Nachbarn steuerst du per CSS-Variablen.
Freie Steuerelemente: Buttons und Indikatoren dürfen oben, unten oder als Overlay sitzen.
Enden: Wähle zwischen loop, wrap und stop.
Autoplay mit Pause-Button: inklusive Fortschrittsanzeige im aktiven Indikator.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Funktionsweise

Das Carousel baut auf CSS Scroll Snap auf. Gleiten, Touch-Ziehen, Schwung und Tastatur-Scrollen übernimmt der Browser. Das JavaScript steuert Autoplay, Vor/Zurück, Indikatoren und den Abgleich der aktiven Folie.
Weil die Folien in einem echten Scroll-Container liegen, kann das Carousel mehrere Folien gleichzeitig zeigen, die Nachbarfolien anreißen („Peek“) und unterschiedlich breite Folien mischen – alles per CSS.
Die Zahl der Folien ist beliebig, ebenso ihr Inhalt. In jedes .carousel-item passt beliebiges Markup. Verschachtelte Carousels werden nicht unterstützt.
Folien gleichen ihre Maße nicht automatisch an. Größen regelst du bei Bedarf mit Utilities oder eigenem CSS. Buttons und Indikatoren sind optional.
Autoplay beim Laden und das Mitführen der aktiven Folie beim Scrollen setzen eine initialisierte Instanz voraus. Carousels mit data-bs-autoplay="true" werden beim Laden automatisch initialisiert, alle anderen per Konstruktor. Initialisiere ein Carousel mit Data-Attribut nicht zusätzlich per Konstruktor.
Markiere eine Folie mit .active, um die Startfolie festzulegen – sonst beginnt das Carousel mit der ersten. Gib jedem .carousel eine eindeutige id. Steuerelemente und Indikatoren verweisen per data-bs-target (bzw. href bei Links) auf diese id.

Bei aktivierter Einstellung „Bewegung reduzieren“ (prefers-reduced-motion) werden die Animationen reduziert.

Beispiele

Steuerung oben

Das Standard-Carousel ist schlicht gehalten und lässt sich frei anpassen. Die Steuerelemente dürfen überall stehen, auch außerhalb von .carousel-inner – oben oder unten, in beliebiger Reihenfolge und mit zusätzlichem Inhalt.

Steuerung oben

<div id="carouselStacked" class="carousel slide">
  <div class="d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Steuerung oben</h5>
    <div>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselStacked" data-bs-slide="prev">
        <span class="carousel-icon-prev" aria-hidden="true"></span>
        <span class="visually-hidden">Zurück</span>
      </button>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselStacked" data-bs-slide="next">
        <span class="carousel-icon-next" aria-hidden="true"></span>
        <span class="visually-hidden">Weiter</span>
      </button>
    </div>
  </div>
  <div class="carousel-inner rounded-5">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Erste Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em" text-anchor="middle">Erste Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Zweite Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em" text-anchor="middle">Zweite Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Dritte Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em" text-anchor="middle">Dritte Folie</text></svg>
    </div>
  </div>
</div>

Steuerung unten

Dasselbe Prinzip, nur mit den Buttons unterhalb der Folien.

<div id="carouselStackedBottom" class="carousel slide">
  <div class="carousel-inner rounded-5">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Erste Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em" text-anchor="middle">Erste Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Zweite Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em" text-anchor="middle">Zweite Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Dritte Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em" text-anchor="middle">Dritte Folie</text></svg>
    </div>
  </div>
  <div>
    <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselStackedBottom" data-bs-slide="prev">
      <span class="carousel-icon-prev" aria-hidden="true"></span>
      <span class="visually-hidden">Zurück</span>
    </button>
    <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselStackedBottom" data-bs-slide="next">
      <span class="carousel-icon-next" aria-hidden="true"></span>
      <span class="visually-hidden">Weiter</span>
    </button>
  </div>
</div>

Indikatoren

Indikator-Buttons platzierst du, wo sie hinpassen. Bei einem Overlay-Carousel gehören sie in .carousel-overlay-controls, das über dem unteren Rand der Folien liegt – die genaue Ausrichtung ergibt sich aus deinem Layout dieser Zeile.

<div id="carouselStackedIndicators" class="carousel slide">
  <div class="carousel-inner rounded-5">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Erste Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em" text-anchor="middle">Erste Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Zweite Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em" text-anchor="middle">Zweite Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Dritte Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em" text-anchor="middle">Dritte Folie</text></svg>
    </div>
  </div>
  <div class="d-flex justify-content-between align-items-center">
    <div>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselStackedIndicators" data-bs-slide="prev">
        <span class="carousel-icon-prev" aria-hidden="true"></span>
        <span class="visually-hidden">Zurück</span>
      </button>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselStackedIndicators" data-bs-slide="next">
        <span class="carousel-icon-next" aria-hidden="true"></span>
        <span class="visually-hidden">Weiter</span>
      </button>
    </div>
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselStackedIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Folie 1"></button>
      <button type="button" data-bs-target="#carouselStackedIndicators" data-bs-slide-to="1" aria-label="Folie 2"></button>
      <button type="button" data-bs-target="#carouselStackedIndicators" data-bs-slide-to="2" aria-label="Folie 3"></button>
    </div>
  </div>
</div>

Eigene Inhalte

In jedes .carousel-item passt beliebiges Markup. Größe und Gestaltung regelst du mit Utilities oder eigenem CSS.

Baue, was du willst

Stelle Folien aus eigenem Markup zusammen – Text, Buttons, Karten oder Medien.

Loslegen

Gestalte nach Wunsch

Größe und Optik jeder Folie regelst du mit Utilities oder eigenem CSS.

Mehr erfahren

Kombiniere frei

Verbinde eigene Inhalte mit Buttons, Indikatoren und dem Overlay-Layout.

Beispiele ansehen

<div id="carouselExampleContent" class="carousel slide">
  <div class="carousel-inner rounded-5">
    <div class="carousel-item active">
      <div class="d-flex flex-column justify-content-center bg-subtle-primary p-9 bg-1 rounded-5" style="min-height: 320px;">
        <h3>Baue, was du willst</h3>
        <p class="fg-emphasis-secondary mb-3">Stelle Folien aus eigenem Markup zusammen – Text, Buttons, Karten oder Medien.</p>
        <div><a class="btn-solid theme-primary" href="#">Loslegen</a></div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="d-flex flex-column justify-content-center text-center bg-subtle-success p-9 bg-2 rounded-5" style="min-height: 320px;">
        <h3>Gestalte nach Wunsch</h3>
        <p class="fg-emphasis-secondary mb-3">Größe und Optik jeder Folie regelst du mit Utilities oder eigenem CSS.</p>
        <div><a class="btn-solid theme-success" href="#">Mehr erfahren</a></div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="d-flex flex-column justify-content-center text-end bg-subtle-warning p-9 bg-3 rounded-5" style="min-height: 320px;">
        <h3>Kombiniere frei</h3>
        <p class="fg-emphasis-secondary mb-3">Verbinde eigene Inhalte mit Buttons, Indikatoren und dem Overlay-Layout.</p>
        <div><a class="btn-solid theme-inverse" href="#">Beispiele ansehen</a></div>
      </div>
    </div>
  </div>
  <div class="d-flex justify-content-center gap-2">
    <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselExampleContent" data-bs-slide="prev" style="--bs-carousel-control-icon-width: 1rem;">
      <span class="carousel-icon-prev" aria-hidden="true"></span>
      <span class="visually-hidden">Zurück</span>
    </button>
    <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselExampleContent" data-bs-slide="next" style="--bs-carousel-control-icon-width: 1rem;">
      <span class="carousel-icon-next" aria-hidden="true"></span>
      <span class="visually-hidden">Weiter</span>
    </button>
  </div>
</div>

Modifikatoren

Mit Modifikatoren änderst du Position der Steuerelemente und Animation.

Overlay-Steuerung

.carousel-overlay legt die Steuerelemente über die Folien. Alles, was darüber liegen soll, kommt in .carousel-overlay-controls.

<div id="carouselExample" class="carousel carousel-overlay slide">
  <div class="carousel-inner rounded-5">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Erste Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em" text-anchor="middle">Erste Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Zweite Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em" text-anchor="middle">Zweite Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Dritte Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em" text-anchor="middle">Dritte Folie</text></svg>
    </div>
  </div>
  <div class="carousel-overlay-controls">
    <div>
      <button class="btn-icon btn-sm btn-subtle theme-secondary" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-icon-prev" aria-hidden="true"></span>
        <span class="visually-hidden">Zurück</span>
      </button>
      <button class="btn-icon btn-sm btn-subtle theme-secondary" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-icon-next" aria-hidden="true"></span>
        <span class="visually-hidden">Weiter</span>
      </button>
    </div>
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Folie 1"></button>
      <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Folie 2"></button>
      <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Folie 3"></button>
    </div>
  </div>
</div>

Überblenden

Mit .carousel-fade wechseln die Folien per Überblendung statt per Schieben. Bei reinen Textfolien brauchst du eventuell .bg-body oder eigenes CSS an den .carousel-items, damit das Überblenden sauber aussieht. Die Dauer steuert --bs-carousel-fade-duration. Bei „Bewegung reduzieren“ wird sofort gewechselt.

<div id="carouselExampleFade" class="carousel carousel-fade">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Erste Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em" text-anchor="middle">Erste Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Zweite Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em" text-anchor="middle">Zweite Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Platzhalter: Dritte Folie" preserveAspectRatio="xMidYMid slice"><title>Platzhalter</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em" text-anchor="middle">Dritte Folie</text></svg>
    </div>
  </div>
  <div>
    <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
      <span class="carousel-icon-prev" aria-hidden="true"></span>
      <span class="visually-hidden">Zurück</span>
    </button>
    <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
      <span class="carousel-icon-next" aria-hidden="true"></span>
      <span class="visually-hidden">Weiter</span>
    </button>
  </div>
</div>

Elemente pro Ansicht

Da das Carousel ein echter Scroll-Container ist, legst du Anzahl und Größe der sichtbaren Folien mit ein paar CSS-Variablen am .carousel fest – ohne JavaScript.

--bs-carousel-items: Anzahl ganzer Folien pro Ansicht (Standard 1).
--bs-carousel-items-gap: Abstand zwischen den Folien (Standard 0).
--bs-carousel-items-peek: wie weit die Nachbarfolien hereinragen (Standard 0).

Mehrere Folien

Mit --bs-carousel-items zeigst du mehrere Folien gleichzeitig, z. B. style="--bs-carousel-items: 3;". Den Abstand setzt du mit --bs-carousel-items-gap.

Drei auf einmal

<div id="carouselMultiple" class="carousel slide" data-bs-ends="stop" style="--bs-carousel-items: 3; --bs-carousel-items-gap: 1rem;">
  <div class="d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Drei auf einmal</h5>
    <div>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselMultiple" data-bs-slide="prev" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-prev" aria-hidden="true"></span>
        <span class="visually-hidden">Zurück</span>
      </button>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselMultiple" data-bs-slide="next" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-next" aria-hidden="true"></span>
        <span class="visually-hidden">Weiter</span>
      </button>
    </div>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active"><svg class="bd-placeholder-img d-block w-100 rounded-5" width="260" height="200" role="img" aria-label="1"><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">1</text></svg></div>
    <div class="carousel-item"><svg class="bd-placeholder-img d-block w-100 rounded-5" width="260" height="200" role="img" aria-label="2"><rect width="100%" height="100%" fill="#6c6c6c"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">2</text></svg></div>
    <div class="carousel-item"><svg class="bd-placeholder-img d-block w-100 rounded-5" width="260" height="200" role="img" aria-label="3"><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">3</text></svg></div>
    <div class="carousel-item"><svg class="bd-placeholder-img d-block w-100 rounded-5" width="260" height="200" role="img" aria-label="4"><rect width="100%" height="100%" fill="#5c5c5c"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">4</text></svg></div>
    <div class="carousel-item"><svg class="bd-placeholder-img d-block w-100 rounded-5" width="260" height="200" role="img" aria-label="5"><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">5</text></svg></div>
    <div class="carousel-item"><svg class="bd-placeholder-img d-block w-100 rounded-5" width="260" height="200" role="img" aria-label="6"><rect width="100%" height="100%" fill="#4c4c4c"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">6</text></svg></div>
    <div class="carousel-item"><svg class="bd-placeholder-img d-block w-100 rounded-5" width="260" height="200" role="img" aria-label="7"><rect width="100%" height="100%" fill="#444"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">7</text></svg></div>
  </div>
</div>

Nachbarn anreißen (Peek)

--bs-carousel-items-peek lässt einen Streifen der vorherigen und nächsten Folie sehen – ein Hinweis, dass es weitergeht.

Nachbarn anreißen

<div id="carouselPeek" class="carousel slide" data-bs-ends="stop" style="--bs-carousel-items-peek: 3rem; --bs-carousel-items-gap: 1rem;">
  <div class="d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Nachbarn anreißen</h5>
    <div>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselPeek" data-bs-slide="prev" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-prev" aria-hidden="true"></span>
        <span class="visually-hidden">Zurück</span>
      </button>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselPeek" data-bs-slide="next" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-next" aria-hidden="true"></span>
        <span class="visually-hidden">Weiter</span>
      </button>
    </div>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active"><svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="300" role="img" aria-label="Erste Folie"><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">Erste Folie</text></svg></div>
    <div class="carousel-item"><svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="300" role="img" aria-label="Zweite Folie"><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">Zweite Folie</text></svg></div>
    <div class="carousel-item"><svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="300" role="img" aria-label="Dritte Folie"><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">Dritte Folie</text></svg></div>
    <div class="carousel-item"><svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="300" role="img" aria-label="Vierte Folie"><rect width="100%" height="100%" fill="#444"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">Vierte Folie</text></svg></div>
    <div class="carousel-item"><svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="300" role="img" aria-label="Fünfte Folie"><rect width="100%" height="100%" fill="#333"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">Fünfte Folie</text></svg></div>
  </div>
</div>

Variable Breite

Mit .carousel-auto legst du die Breite jedes .carousel-item selbst fest (Utilities oder eigenes CSS). Die Einrastpunkte liegen trotzdem auf jeder Folie.

Gemischte Breiten

<div id="carouselVariable" class="carousel carousel-auto slide" data-bs-ends="stop" style="--bs-carousel-items-gap: 1rem;">
  <div class="d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Gemischte Breiten</h5>
    <div>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselVariable" data-bs-slide="prev" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-prev" aria-hidden="true"></span>
        <span class="visually-hidden">Zurück</span>
      </button>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselVariable" data-bs-slide="next" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-next" aria-hidden="true"></span>
        <span class="visually-hidden">Weiter</span>
      </button>
    </div>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" style="width: 160px;">
      <svg class="bd-placeholder-img d-block w-100 rounded-5" width="160" height="200" role="img" aria-label="A"><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">A</text></svg>
    </div>
    <div class="carousel-item" style="width: 320px;">
      <svg class="bd-placeholder-img d-block w-100 rounded-5" width="320" height="200" role="img" aria-label="B"><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">B</text></svg>
    </div>
    <div class="carousel-item" style="width: 220px;">
      <svg class="bd-placeholder-img d-block w-100 rounded-5" width="220" height="200" role="img" aria-label="C"><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">C</text></svg>
    </div>
    <div class="carousel-item" style="width: 380px;">
      <svg class="bd-placeholder-img d-block w-100 rounded-5" width="380" height="200" role="img" aria-label="D"><rect width="100%" height="100%" fill="#4c4c4c"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">D</text></svg>
    </div>
    <div class="carousel-item" style="width: 200px;">
      <svg class="bd-placeholder-img d-block w-100 rounded-5" width="200" height="200" role="img" aria-label="E"><rect width="100%" height="100%" fill="#444"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">E</text></svg>
    </div>
    <div class="carousel-item" style="width: 300px;">
      <svg class="bd-placeholder-img d-block w-100 rounded-5" width="300" height="200" role="img" aria-label="F"><rect width="100%" height="100%" fill="#333"/><text x="50%" y="50%" fill="#fff" dy=".3em" text-anchor="middle">F</text></svg>
    </div>
  </div>
</div>

.carousel-center rastet die aktive Folie mittig statt am Anfang ein – passt gut zu --bs-carousel-items-peek.

Autoplay

Mit der Option autoplay: true bzw. data-bs-autoplay="true" läuft das Carousel ab dem Laden automatisch. Bei Hover pausiert es (Option pause), ebenso solange die Seite nicht sichtbar ist (sofern die Page Visibility API verfügbar ist). Sobald jemand selbst eingreift – per Button, Indikator, Tastatur oder Wischen – stoppt Autoplay endgültig.

Aus Gründen der Barrierefreiheit rät Bootstrap von automatisch laufenden Carousels ab. Wenn du doch eins einsetzt, biete einen gut auffindbaren Button zum Anhalten und Fortsetzen an: .carousel-control-play-pause (siehe unten). Damit erfüllst du WCAG 2.2, Kriterium 2.2.2 (Pausieren, Beenden, Ausblenden) – ein Pausieren nur bei Hover oder Fokus reicht dafür nicht.

Der Play/Pause-Button schaltet Autoplay um und zeigt den Zustand automatisch an: Pause-Icon während der Wiedergabe, Play-Icon im Stillstand. Die zugänglichen Namen setzt du mit data-bs-play-label und data-bs-pause-label. Während der Wiedergabe füllt sich der aktive Indikator wie ein Fortschrittsbalken über das Intervall der Folie. Bei „Bewegung reduzieren“ entfällt das; die Farbe setzt du mit --bs-carousel-indicator-progress-bg.

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-autoplay="true">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" role="img" aria-label="Erste Folie"><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em" text-anchor="middle">Erste Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" role="img" aria-label="Zweite Folie"><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em" text-anchor="middle">Zweite Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" role="img" aria-label="Dritte Folie"><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em" text-anchor="middle">Dritte Folie</text></svg>
    </div>
  </div>
  <div class="d-flex justify-content-between align-items-center">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Folie 1"></button>
      <button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="1" aria-label="Folie 2"></button>
      <button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="2" aria-label="Folie 3"></button>
    </div>
    <div>
      <button class="btn-icon btn-sm carousel-control-play-pause" type="button" data-bs-target="#carouselExampleAutoplaying" aria-label="Pausieren" data-bs-pause-label="Pausieren" data-bs-play-label="Abspielen">
        <span class="carousel-icon-pause" aria-hidden="true"></span>
        <span class="carousel-icon-play" aria-hidden="true"></span>
      </button>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
        <span class="carousel-icon-prev" aria-hidden="true"></span>
        <span class="visually-hidden">Zurück</span>
      </button>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
        <span class="carousel-icon-next" aria-hidden="true"></span>
        <span class="visually-hidden">Weiter</span>
      </button>
    </div>
  </div>
</div>

Individuelle Intervalle

data-bs-interval="" an einem .carousel-item legt fest, wie lange diese Folie stehen bleibt. Die Fortschrittsanzeige passt sich an – unten 2, 4 und 6 Sekunden.

<div id="carouselExampleInterval" class="carousel slide" data-bs-autoplay="true">
  <div class="carousel-inner rounded-5">
    <div class="carousel-item active" data-bs-interval="2000">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" role="img" aria-label="Erste: 2 Sekunden"><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em" text-anchor="middle">Erste: 2 Sekunden</text></svg>
    </div>
    <div class="carousel-item" data-bs-interval="4000">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" role="img" aria-label="Zweite: 4 Sekunden"><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em" text-anchor="middle">Zweite: 4 Sekunden</text></svg>
    </div>
    <div class="carousel-item" data-bs-interval="6000">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" role="img" aria-label="Dritte: 6 Sekunden"><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em" text-anchor="middle">Dritte: 6 Sekunden</text></svg>
    </div>
  </div>
  <div class="d-flex justify-content-between align-items-center mt-3">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleInterval" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Folie 1"></button>
      <button type="button" data-bs-target="#carouselExampleInterval" data-bs-slide-to="1" aria-label="Folie 2"></button>
      <button type="button" data-bs-target="#carouselExampleInterval" data-bs-slide-to="2" aria-label="Folie 3"></button>
    </div>
    <button class="btn-icon btn-sm carousel-control-play-pause" type="button" data-bs-target="#carouselExampleInterval" aria-label="Pausieren" data-bs-pause-label="Pausieren" data-bs-play-label="Abspielen">
      <span class="carousel-icon-pause" aria-hidden="true"></span>
      <span class="carousel-icon-play" aria-hidden="true"></span>
    </button>
  </div>
</div>

Verhalten an den Enden

Die Option ends (bzw. data-bs-ends) bestimmt, was an der ersten und letzten Folie passiert: loop (Standard), wrap oder stop.

Loop (Standard)

Mit data-bs-ends="loop" scrollt das Carousel nahtlos über die Enden hinaus: Von der letzten Folie geht es in derselben Richtung weiter zur ersten, ohne Rücksprung – wie ein Endlosband. Das gilt für Einzelfolien-Carousels mit Buttons, Tastatur oder Autoplay. Mehrfach-, Peek-, zentrierte und variable Layouts sowie „Bewegung reduzieren“ fallen auf den wrap-Sprung zurück.

Endlos (Loop)

<div id="carouselEndsLoop" class="carousel slide" data-bs-ends="loop">
  <div class="d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Endlos (Loop)</h5>
    <div>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselEndsLoop" data-bs-slide="prev" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-prev" aria-hidden="true"></span>
        <span class="visually-hidden">Zurück</span>
      </button>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselEndsLoop" data-bs-slide="next" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-next" aria-hidden="true"></span>
        <span class="visually-hidden">Weiter</span>
      </button>
    </div>
  </div>
  <div class="carousel-inner rounded-5">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" role="img" aria-label="Erste Folie"><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em" text-anchor="middle">Erste Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" role="img" aria-label="Zweite Folie"><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em" text-anchor="middle">Zweite Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" role="img" aria-label="Dritte Folie"><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em" text-anchor="middle">Dritte Folie</text></svg>
    </div>
  </div>
</div>

Wrap

Mit data-bs-ends="wrap" springt das Carousel von der letzten zur ersten Folie und umgekehrt – die Buttons laufen nie ins Leere.

Umbrechen (Wrap)

<div id="carouselEndsWrap" class="carousel slide" data-bs-ends="wrap">
  <div class="d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Umbrechen (Wrap)</h5>
    <div>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselEndsWrap" data-bs-slide="prev" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-prev" aria-hidden="true"></span>
        <span class="visually-hidden">Zurück</span>
      </button>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselEndsWrap" data-bs-slide="next" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-next" aria-hidden="true"></span>
        <span class="visually-hidden">Weiter</span>
      </button>
    </div>
  </div>
  <div class="carousel-inner rounded-5">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" role="img" aria-label="Erste Folie"><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em" text-anchor="middle">Erste Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" role="img" aria-label="Zweite Folie"><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em" text-anchor="middle">Zweite Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" role="img" aria-label="Dritte Folie"><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em" text-anchor="middle">Dritte Folie</text></svg>
    </div>
  </div>
</div>

Stop

Mit data-bs-ends="stop" ist an der ersten und letzten Folie Schluss. Der Zurück-Button wird auf der ersten, der Weiter-Button auf der letzten Folie automatisch über das native disabled deaktiviert. Hat ein Button dabei den Fokus, wandert dieser zum gegenüberliegenden Button.

Stopp an den Enden

<div id="carouselEndsStop" class="carousel slide" data-bs-ends="stop">
  <div class="d-flex justify-content-between align-items-center">
    <h5 class="mb-0">Stopp an den Enden</h5>
    <div>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselEndsStop" data-bs-slide="prev" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-prev" aria-hidden="true"></span>
        <span class="visually-hidden">Zurück</span>
      </button>
      <button class="btn-icon btn-sm" type="button" data-bs-target="#carouselEndsStop" data-bs-slide="next" style="--bs-carousel-control-icon-width: 1rem;">
        <span class="carousel-icon-next" aria-hidden="true"></span>
        <span class="visually-hidden">Weiter</span>
      </button>
    </div>
  </div>
  <div class="carousel-inner rounded-5">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" role="img" aria-label="Erste Folie"><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em" text-anchor="middle">Erste Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" role="img" aria-label="Zweite Folie"><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em" text-anchor="middle">Zweite Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100" width="800" height="400" role="img" aria-label="Dritte Folie"><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em" text-anchor="middle">Dritte Folie</text></svg>
    </div>
  </div>
</div>

Dunkles Carousel

data-bs-theme="dark" am .carousel sorgt für dunklere Steuerelemente und Indikatoren – vor allem bei Overlay-Carousels mit hellen Folien sinnvoll.

<div id="carouselExampleDark" class="carousel carousel-overlay slide" data-bs-theme="dark">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" role="img" aria-label="Erste Folie"><rect width="100%" height="100%" fill="#f5f5f5"/><text x="50%" y="50%" fill="#aaa" dy=".3em" text-anchor="middle">Erste Folie</text></svg>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" role="img" aria-label="Zweite Folie"><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#bbb" dy=".3em" text-anchor="middle">Zweite Folie</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img-lg d-block w-100 rounded-5" width="800" height="400" role="img" aria-label="Dritte Folie"><rect width="100%" height="100%" fill="#e5e5e5"/><text x="50%" y="50%" fill="#999" dy=".3em" text-anchor="middle">Dritte Folie</text></svg>
    </div>
  </div>
  <div class="carousel-overlay-controls">
    <button class="btn-icon btn-sm btn-subtle theme-secondary" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
      <span class="carousel-icon-prev" aria-hidden="true"></span>
      <span class="visually-hidden">Zurück</span>
    </button>
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Folie 1"></button>
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Folie 2"></button>
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Folie 3"></button>
    </div>
    <button class="btn-icon btn-sm btn-subtle theme-secondary" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
      <span class="carousel-icon-next" aria-hidden="true"></span>
      <span class="visually-hidden">Weiter</span>
    </button>
  </div>
</div>

Verwendung

Per Data-Attribute

Mit Data-Attributen steuerst du die Position: data-bs-slide nimmt prev oder next und bewegt relativ zur aktuellen Folie. data-bs-slide-to springt zu einem Index ab 0, z. B. data-bs-slide-to="2".

Attribut	Beschreibung
`data-bs-autoplay`	Bei `true` startet das Carousel beim Laden automatisch.
`data-bs-slide`	`prev` oder `next` – relativ zur aktuellen Folie.
`data-bs-slide-to`	Index der anzuzeigenden Folie, beginnend bei 0.
`data-bs-interval`	Autoplay-Intervall in Millisekunden.
`data-bs-ends`	Verhalten an den Enden: `stop`, `wrap` oder `loop`.
`data-bs-play-label`	Am `.carousel-control-play-pause`-Button: `aria-label` im Stillstand.
`data-bs-pause-label`	Am `.carousel-control-play-pause`-Button: `aria-label` während der Wiedergabe.

Per JavaScript

Manuell initialisierst du ein Carousel so:

const carousel = new bootstrap.Carousel('#myCarousel')

Optionen

Optionen übergibst du per Data-Attribut (data-bs- + Optionsname, z. B. data-bs-autoplay="true") oder per JavaScript.

Name	Typ	Standard	Beschreibung
`autoplay`	boolean	`false`	Bei `true` läuft das Carousel ab dem Laden automatisch.
`ends`	string	`"loop"`	Verhalten an den Enden. `"stop"` hält an der ersten/letzten Folie und deaktiviert den passenden `<button>` (Links mit `<a>` sind nicht betroffen). `"wrap"` springt zum anderen Ende. `"loop"` scrollt bei Einzelfolien nahtlos weiter und fällt bei Mehrfach-, Peek-, zentrierten und variablen Layouts sowie bei „Bewegung reduzieren“ auf `"wrap"` zurück.
`interval`	number	`5000`	Wartezeit bis zum automatischen Wechsel.
`keyboard`	boolean	`true`	Ob das Carousel auf die Tastatur reagiert.
`pause`	string, boolean	`"hover"`	Bei `"hover"` pausiert der Wechsel bei `mouseenter` und läuft bei `mouseleave` weiter. Bei `false` pausiert Hover nicht.

Anzahl sichtbarer Folien, Abstand und Peek steuerst du per CSS, nicht über diese Optionen – siehe Elemente pro Ansicht.

Methoden

Alle API-Methoden arbeiten asynchron und starten einen Übergang. Sie kehren zurück, sobald der Übergang beginnt – nicht erst, wenn er beendet ist. Ein Methodenaufruf auf eine Komponente mitten im Übergang wird ignoriert.

Eine Instanz erzeugst du mit dem Konstruktor und übergibst dabei Optionen – etwa für ein Autoplay-Carousel mit eigenem Intervall (ohne data-bs-autoplay="true" im Markup):

const myCarouselElement = document.querySelector('#myCarousel')

const carousel = new bootstrap.Carousel(myCarouselElement, {
  autoplay: true,
  interval: 2000
})

Methode	Beschreibung
`cycle`	Startet den automatischen Durchlauf von links nach rechts.
`dispose`	Entfernt die Carousel-Instanz und ihre Daten am Element.
`getInstance`	Statisch: liefert die Instanz zu einem Element, z. B. `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Statisch: liefert die Instanz oder legt eine neue an, z. B. `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Wechselt zur nächsten Folie. Kehrt zurück, bevor die Folie angezeigt wird (vor `slid.bs.carousel`).
`nextWhenVisible`	Wechselt nur, wenn Seite, Carousel und Elternelement sichtbar sind. Kehrt zurück, bevor die Folie angezeigt wird.
`pause`	Hält den automatischen Durchlauf an.
`prev`	Wechselt zur vorherigen Folie. Kehrt zurück, bevor die Folie angezeigt wird (vor `slid.bs.carousel`).
`to`	Springt zu einer bestimmten Folie (Index ab 0). Kehrt zurück, bevor die Folie angezeigt wird (vor `slid.bs.carousel`).

Events

Das Carousel löst zwei Events aus, beide direkt am <div class="carousel">. Sie enthalten zusätzlich:

direction: Richtung des Wechsels ("left" oder "right").
relatedTarget: das DOM-Element der neuen aktiven Folie.
from: Index der aktuellen Folie.
to: Index der nächsten Folie.

Event	Beschreibung
`slid.bs.carousel`	Wird ausgelöst, wenn die neue Folie eingerastet ist (bei `.carousel-fade` nach dem Überblenden). Ein Sprung über mehrere Folien per `to()` kann Zwischen-Events auslösen.
`slide.bs.carousel`	Wird sofort beim Aufruf der Instanzmethode `slide` ausgelöst.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

CSS-Variablen und Sass-Tokens findest du in der Originaldokumentation.