Karussell

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

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.).

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

Wenn Sie unser JavaScript aus der Quelle erstellen, ist schließlichutil.js .

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 eine eindeutige ID .carouselfür optionale Steuerelemente festlegen, insbesondere wenn Sie mehrere Karussells auf einer einzelnen Seite verwenden. Bedien- und Anzeigeelemente müssen ein data-targetAttribut (oder hreffür Links) haben, das mit der ID des .carouselElements übereinstimmt.

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-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Mit Kontrollen

Hinzufügen der vorherigen und nächsten Steuerelemente:

Vorherige Nächste

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Mit Indikatoren

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

Vorherige Nächste

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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

Nulla vitae elit libero, ein pharetra augue mollis interdum.

Etikett des zweiten Objektträgers

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etikett des dritten Objektträgers

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Vorherige Nächste

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Überblenden

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

Vorherige Nächste

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Verwendungszweck

Über Datenattribute

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

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

Über JavaScript

Karussell manuell aufrufen mit:

$('.carousel').carousel()

Optionen

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

Methoden

.carousel(options)

Initialisiert das Karussell mit optionalen Optionen objectund beginnt, die Elemente zu durchlaufen.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Blättert von links nach rechts durch die Karussellelemente.

.carousel('pause')

Verhindert, dass das Karussell Artikel durchläuft.

.carousel(number)

Bewegt das Karussell zu einem bestimmten Frame (0-basiert, ähnlich einem Array). Kehrt zum Aufrufer zurück, bevor das Zielelement gezeigt wurde (dh bevor das slid.bs.carouselEreignis eintritt).

.carousel('prev')

Wechselt zum vorherigen Element. Kehrt zum Anrufer zurück, bevor das vorherige Element angezeigt wurde (dh bevor das slid.bs.carouselEreignis eintritt).

.carousel('next')

Wechselt zum nächsten Element. Kehrt zum Anrufer zurück, bevor das nächste Element angezeigt wurde (dh bevor das slid.bs.carouselEreignis eintritt).

.carousel('dispose')

Zerstört das Karussell eines Elements.

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">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Übergangsdauer ändern

Die Übergangsdauer .carousel-itemkann mit der $carousel-transitionSass-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).