Karussell

Eine Diashow-Komponente zum zyklischen Durchlaufen von Elementen – Bildern oder Textfolien – wie in einem Karussell.

Auf dieser Seite

Wie es funktioniert

Das Karussell ist eine Diashow zum Durchlaufen einer Reihe von Inhalten, die mit CSS-3D-Transformationen und etwas JavaScript erstellt wurde. Es funktioniert mit einer Reihe von Bildern, Text oder benutzerdefiniertem Markup. Es enthält auch Unterstützung für vorherige/nächste Steuerelemente und Anzeigen.

In Browsern, in denen die Page Visibility API unterstützt wird, vermeidet das Karussell ein Verrutschen, wenn die Webseite für den Benutzer nicht sichtbar ist (z. B. wenn die Registerkarte des Browsers inaktiv ist, das Browserfenster minimiert ist usw.).

Der Animationseffekt dieser Komponente ist abhängig von der prefers-reduced-motionMedienanfrage. Weitere Informationen finden Sie im Abschnitt zur reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .

Bitte beachten Sie, dass verschachtelte Karussells nicht unterstützt werden und Karussells im Allgemeinen nicht den Zugänglichkeitsstandards entsprechen.

Beispiel

Karussells normalisieren Folienabmessungen nicht automatisch. Daher müssen Sie möglicherweise zusätzliche Dienstprogramme oder benutzerdefinierte Stile verwenden, um den Inhalt entsprechend zu skalieren. Während Karussells vorherige/nächste Steuerelemente und Anzeigen unterstützen, sind sie nicht ausdrücklich erforderlich. Fügen Sie hinzu und passen Sie sie an, wie Sie es für richtig halten.

Die .activeKlasse muss zu einer der Folien hinzugefügt werden, sonst ist das Karussell nicht sichtbar. Stellen Sie außerdem sicher, dass Sie für optionale Steuerelemente einen eindeutigen Wert festlegen id, .carouselinsbesondere wenn Sie mehrere Karussells auf einer einzelnen Seite verwenden. Bedien- und Anzeigeelemente müssen ein data-bs-targetAttribut (oder für Links) haben, das mit dem des Elements hrefübereinstimmt .id.carousel

Nur Folien

Hier ist ein Karussell nur mit Rutschen. Beachten Sie das Vorhandensein von .d-blockund .w-100auf Karussellbildern, um die standardmäßige Bildausrichtung des Browsers zu verhindern.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Mit Kontrollen

Hinzufügen der vorherigen und nächsten Steuerelemente. Wir empfehlen die Verwendung von <button>Elementen, aber Sie können <a>Elemente auch mit verwenden role="button".

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Mit Indikatoren

Sie können neben den Steuerelementen auch die Anzeigen zum Karussell hinzufügen.

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Mit Bildunterschriften

Fügen Sie Ihren Folien ganz einfach Beschriftungen mit dem .carousel-captionElement in einer beliebigen .carousel-item. Sie können mit optionalen Anzeigedienstprogrammen problemlos in kleineren Ansichtsfenstern ausgeblendet werden, wie unten gezeigt . Wir verstecken sie zunächst mit .d-noneund bringen sie mit auf mittelgroße Geräte zurück .d-md-block.

Beschriftung des ersten Objektträgers

Einige repräsentative Platzhalterinhalte für die erste Folie.

Etikett des zweiten Objektträgers

Einige repräsentative Platzhalterinhalte für die zweite Folie.

Etikett des dritten Objektträgers

Einige repräsentative Platzhalterinhalte für die dritte Folie.

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Überblenden

Fügen .carousel-fadeSie Ihrem Karussell hinzu, um Folien mit einem Fade-Übergang anstelle einer Folie zu animieren.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Individuelles `.carousel-item`Intervall

Fügen Sie data-bs-interval=""a hinzu .carousel-item, um die Verzögerungszeit zwischen dem automatischen Wechseln zum nächsten Element zu ändern.

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Deaktivieren Sie das Wischen durch Berühren

Karussells unterstützen das Wischen nach links/rechts auf Touchscreen-Geräten, um zwischen den Folien zu wechseln. Dies kann mit dem data-bs-touchAttribut deaktiviert werden. Das folgende Beispiel enthält auch nicht das data-bs-rideAttribut und hat data-bs-interval="false"daher keine automatische Wiedergabe.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Dunkle Variante

Fügen Sie .carousel-darkfür .carouseldunklere Bedienelemente, Anzeigen und Beschriftungen hinzu. Steuerelemente wurden von ihrer standardmäßigen weißen Füllung mit der filterCSS-Eigenschaft invertiert. Beschriftungen und Steuerelemente haben zusätzliche Sass-Variablen, die die colorund anpassen background-color.

Beschriftung des ersten Objektträgers

Einige repräsentative Platzhalterinhalte für die erste Folie.

Etikett des zweiten Objektträgers

Einige repräsentative Platzhalterinhalte für die zweite Folie.

Etikett des dritten Objektträgers

Einige repräsentative Platzhalterinhalte für die dritte Folie.

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Benutzerdefinierter Übergang

Die Übergangsdauer .carousel-itemkann mit der $carousel-transition-durationSass-Variablen vor dem Kompilieren oder benutzerdefinierten Stilen geändert werden, wenn Sie das kompilierte CSS verwenden. Wenn mehrere Übergänge angewendet werden, stellen Sie sicher, dass der Transformationsübergang zuerst definiert wird (z. B. transition: transform 2s ease, opacity .5s ease-out).

Sass

Variablen

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Verwendungszweck

Über Datenattribute

Verwenden Sie Datenattribute, um die Position des Karussells einfach zu steuern. data-bs-slideakzeptiert die Schlüsselwörter prevoder next, wodurch die Folienposition relativ zu ihrer aktuellen Position geändert wird. Verwenden Sie alternativ , data-bs-slide-toum einen rohen Folienindex an das Karussell zu übergeben data-bs-slide-to="2", wodurch die Folienposition zu einem bestimmten Index verschoben wird, der mit beginnt 0.

Das data-bs-ride="carousel"Attribut wird verwendet, um ein Karussell ab dem Laden der Seite als animierend zu markieren. Wenn Sie Ihr Karussell nicht data-bs-ride="carousel"mit initialisieren, müssen Sie es selbst initialisieren. Es kann nicht in Kombination mit (redundanter und unnötiger) expliziter JavaScript-Initialisierung desselben Karussells verwendet werden.

Über JavaScript

Karussell manuell aufrufen mit:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-bs-, wie in data-bs-interval="".

Name	Typ	Standard	Beschreibung
`interval`	Nummer	`5000`	Die Zeitspanne, die zwischen dem automatischen Durchlaufen eines Elements verzögert werden soll. Wenn `false`, läuft das Karussell nicht automatisch.
`keyboard`	boolesch	`true`	Ob das Karussell auf Tastaturereignisse reagieren soll.
`pause`	Zeichenfolge \| boolesch	`'hover'`	Wenn auf eingestellt, `'hover'`wird der Umlauf des Karussells `mouseenter`angehalten und der Umlauf des Karussells fortgesetzt `mouseleave`. Wenn auf eingestellt `false`, wird es nicht angehalten, wenn Sie den Mauszeiger über das Karussell bewegen. Wenn auf berührungsempfindlichen Geräten eingestellt ist `'hover'`, wird das Radfahren `touchend`für zwei Intervalle angehalten (sobald der Benutzer die Interaktion mit dem Karussell beendet hat), bevor es automatisch fortgesetzt wird. Beachten Sie, dass dies zusätzlich zum obigen Mausverhalten erfolgt.
`ride`	Zeichenfolge \| boolesch	`false`	Spielt das Karussell automatisch ab, nachdem der Benutzer das erste Element manuell durchlaufen hat. Wenn auf eingestellt, `'carousel'`spielt das Karussell beim Laden automatisch ab.
`wrap`	boolesch	`true`	Ob das Karussell kontinuierlich fahren oder harte Stopps haben soll.
`touch`	boolesch	`true`	Ob das Karussell Links/Rechts-Wischinteraktionen auf Touchscreen-Geräten unterstützen soll.

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang . Sie kehren zum Aufrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet . Außerdem wird ein Methodenaufruf einer Übergangskomponente ignoriert .

Weitere Informationen finden Sie in unserer JavaScript-Dokumentation .

Sie können beispielsweise eine Karussellinstanz mit dem Karussellkonstruktor erstellen, um sie mit zusätzlichen Optionen zu initialisieren und Elemente zu durchlaufen:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})

Methode	Beschreibung
`cycle`	Blättert von links nach rechts durch die Karussellelemente.
`pause`	Verhindert, dass das Karussell Artikel durchläuft.
`prev`	Wechselt zum vorherigen Element. Kehrt zum Anrufer zurück, bevor das vorherige Element gezeigt wurde (z. B. bevor das `slid.bs.carousel`Ereignis eintritt).
`next`	Wechselt zum nächsten Element. Kehrt zum Anrufer zurück, bevor das nächste Element gezeigt wurde (z. B. bevor das `slid.bs.carousel`Ereignis eintritt).
`nextWhenVisible`	Wechseln Sie nicht vom Karussell zum nächsten, wenn die Seite nicht sichtbar ist oder das Karussell oder sein übergeordnetes Element nicht sichtbar ist. Kehrt zum Anrufer zurück, bevor das Zielelement angezeigt wurde
`to`	Bewegt das Karussell zu einem bestimmten Frame (0-basiert, ähnlich einem Array). Kehrt zum Aufrufer zurück, bevor das Zielelement gezeigt wurde (z. B. bevor das `slid.bs.carousel`Ereignis eintritt).
`dispose`	Zerstört das Karussell eines Elements. (Entfernt gespeicherte Daten auf dem DOM-Element)
`getInstance`	Statische Methode, mit der Sie die einem DOM-Element zugeordnete Karussellinstanz abrufen können. Sie können sie wie folgt verwenden:`bootstrap.Carousel.getInstance(element)`
`getOrCreateInstance`	Statische Methode, die eine einem DOM-Element zugeordnete Karussellinstanz zurückgibt oder eine neue erstellt, falls sie nicht initialisiert wurde. Sie können es wie folgt verwenden:`bootstrap.Carousel.getOrCreateInstance(element)`

Veranstaltungen

Die Karussellklasse von Bootstrap macht zwei Ereignisse verfügbar, um sich in die Karussellfunktionalität einzuklinken. Beide Ereignisse haben die folgenden zusätzlichen Eigenschaften:

direction: Die Richtung, in die das Karussell gleitet (entweder "left"oder "right").
relatedTarget: Das DOM-Element, das als aktives Element eingefügt wird.
from: Der Index des aktuellen Elements
to: Der Index des nächsten Elements

Alle Karussell-Ereignisse werden beim Karussell selbst ausgelöst (dh beim <div class="carousel">).

Ereignistyp	Beschreibung
`slide.bs.carousel`	Wird sofort ausgelöst, wenn die `slide`Instanzmethode aufgerufen wird.
`slid.bs.carousel`	Wird ausgelöst, wenn das Karussell seinen Rutschenübergang abgeschlossen hat.

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

Karussell

Wie es funktioniert

Beispiel

Nur Folien

Mit Kontrollen

Mit Indikatoren

Mit Bildunterschriften

Beschriftung des ersten Objektträgers

Etikett des zweiten Objektträgers

Etikett des dritten Objektträgers

Überblenden

Individuelles .carousel-itemIntervall

Deaktivieren Sie das Wischen durch Berühren

Dunkle Variante

Beschriftung des ersten Objektträgers

Etikett des zweiten Objektträgers

Etikett des dritten Objektträgers

Benutzerdefinierter Übergang

Sass

Variablen

Verwendungszweck

Über Datenattribute

Über JavaScript

Optionen

Methoden

Asynchrone Methoden und Übergänge

Veranstaltungen

Individuelles `.carousel-item`Intervall