Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Webanwendungen und Websites. Bootstrap basiert auf HTML, CSS und JavaScript.
Fall
Das Folgende ist ein Karussellfall, das von diesem Plug-in und verwandten Komponenten hergestellt wurde.
<div id = "carousel-example-generic" data-ride = "carousel"> <!-Indikatoren-> <ol> <li data-target = "#carousel-example-generic" data-klide-to = "0"> </li> <li data-target = "#carousel-exam-generic" data-Sslside "1" 1 "> </li> </li li li lilside" Data-target = "#Carousel-example-generische" Daten-Slide-to = "2"> </li> </ol> <!-Wrapper für Folien-> <div> <img src = "..."> <div> ... </div> </div> ... </div> <!-kontrolliert-> <a href = "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#carous Data-Slide = "prev"> <span> </span> </a> <a href = "#Carousel-example-generic" data-Slide = "Weiter"> <span> </span> </a> </div>
Internet Explorer 8 & 9 unterstützt keine Übergangsanimationseffekte
Bootstrap implementiert Animationseffekte basierend auf CSS3, aber Internet Explorer 8 & 9 unterstützt diese erforderlichen CSS -Eigenschaften nicht. Daher gehen Übergangsanimationseffekte bei beiden Browsern verloren. Darüber hinaus beabsichtigen wir nicht, die jQuery-basierte Implementierung alternativer Funktionen zu verwenden.
Optionale Optionen
In jedem .Initem können Sie jeder Folie .Carousel-Kapion hinzufügen. Sie können auch jeden HTML -Code hinzufügen, der automatisch angeordnet und formatiert wird.
900x500
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
Zugänglichkeitsprobleme
Die Karussellkomponente ist nicht mit den Barrierefreiheitsstandards kompatibel. Wenn Kompatibilität erforderlich ist, berücksichtigen Sie andere Optionen für die Präsentation von Folien.
Verwendung
Durch Datenattribut
Das Datenattribut kann die Positionierung des Karussells leicht steuern. Die Data-Slide kann die Vor- oder nächsten Schlüsselwörter akzeptieren, die die Wiedergabeposition steuern. Darüber hinaus kann das Slide-Index, das mit 0 beginnt, auch durch Datenklammern weitergegeben werden.
Das Data-Ride = "Carousel" -attribut wird verwendet, um die Karussellkomponente zu markieren, die nach dem Laden der Seite beginnt.
über JavaScript
Starten Sie die Karussellkomponente manuell:
Die Codekopie lautet wie folgt:
$ ('. Carousel'). Carousel ()
Optionen
Optionen können durch Dateneigenschaften oder JavaScript weitergeleitet werden. Für Datenattribute müssen Sie den Optionsnamen nach Daten einfügen, z. B. Dateninterval = "".
Name des Namens Typ Standardwert beschreibt die Wartezeit für die Intervallnummer 5000 -Folie -Rotation. Wenn falsch, startet das Karussell die Schleife nicht automatisch. Pause Saite "schweben". Die Maus bleibt im Rutschenbereich und macht das Karussell pausiert, und die Maus verlässt das Karussell. Wrap boolean true , ob das Karussell weiter schleift.
Verfahren
.Carousel (Optionen)
Initialisieren Sie die Karussellkomponente, akzeptieren Sie einen optionalen Optionsparameter für Objekttypen und starten Sie die Dia -Schleife.
$ ('. Carousel'). Carousel ({Intervall: 2000}). Carousel ('Zyklus')Fahren Sie jeden Rahmen von links nach rechts.
.Carousel ('Pause')
Karussell anhalten.
.Carousel (Nummer)
Positionieren Sie das Karussell auf den angegebenen Frame (Frame -Index startet mit 0, ähnlich einem Array).
.Carousel ('prev')
Kehren Sie zum vorherigen Frame zurück.
.Carousel ('Next')
Gehen Sie zum nächsten Frame.
Ereignis
Die Karussellkomponente von Bootstrap enthält zwei Ereignisse zum Hören.
| Ereignisart | beschreiben |
|---|---|
| Slide.bs.Carousel | Dieses Ereignis beginnt unmittelbar nach dem Aufrufen slide -Methode. |
| Slid.bs.Carousel | Es wird ausgelöst, wenn alle Diashows gespielt werden. |
$ ('#mycarousel'). on ('Slide.bs.Carousel', Funktion () {// etwas tun…})Das obige ist die detaillierte Erklärung des Bootstrap Carousel Effect-Falls basierend auf dem vom Editor eingeführten JS-Plug-In. Ich hoffe es kann dir helfen!