Das Bootstrap-Karussell-Plug-In ist eine flexible und reaktionsschnelle Möglichkeit, Slider zu Ihrer Website hinzuzufügen. Außerdem ist der Inhalt flexibel genug, um ein Bild, ein eingebetteter Rahmen, ein Video oder eine andere Art von Inhalten zu sein, die Sie platzieren möchten.
Wenn Sie auf die Funktionalität des Plugins separat verweisen möchten, müssen Sie sich mit Carousel.js verweisen. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
1. Beispiel
Unten ist eine einfache Folie, die eine gemeinsame Komponente eines Schleifelements mit dem Bootstrap -Karussell -Plugin anzeigt. Um Karussell zu implementieren, müssen Sie den Code nur mit dieser Marke hinzufügen. Es besteht keine Notwendigkeit, Datenattribute zu verwenden, nur eine einfache klassenbasierte Entwicklung.
<! DocType html> <html> <kopf> <titels> bootstrap-Instanz- Einfache Karussell-Plug-In </title> <link href = "/bootstrap/css/bootstrap.min src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/media/uploads/2014/07/slide1.png"> </div> <div> <img src="/media/uploads/2014/07/slide2.png"> </div> <div> <img src = "/media/uploads/2014/07/slide3.png"> </div> </div> <!-Carousel Navigation-> <a href = "#mycarousel" data-Slide = "prev"> ‹</a> <a href = "#mycarousel" daten-lside = "
Die Ergebnisse sind wie folgt:
Einfaches Karussell -Plugin
2. Optionaler Titel
Sie können der Folie über das .Carousel-Kapion-Element innerhalb des .tems einen Titel hinzufügen. Setzen Sie einfach optionale HTML dort ein und es wird automatisch ausgerichtet und formatiert. Das folgende Beispiel zeigt dies:
<! DocType html> <html> <Head> <title> Bootstrap -Instanz - Titel des Karussell -Plug -Ins </title> <link href = "/bootstrap/css/bootstrap.min src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target = "#mycarousel" Data-Slide-to = "2"> </li> </ol> <!-Carousel-Projekt-> <div> <img src = "/media/Uploads/2014/07/Slide1.png" <Div> Titel 2 </div> </div> <div> <img src = "/Media/Uploads/2014/07/Slide3.png"> <div> Titel 3 </div> </div> </div> <!-Carousel Navigation-<a href = "#mycarousel Data-Lside =" Prev "‹ & · ‹& ·‹/are " Data-Slide = "Next" >› </a> </div> </body> </html>
Die Ergebnisse sind wie folgt:
Karussell -Plugin -Titel
3. Nutzung
Durch Datenattribut: Verwenden von Datenattributen ist es einfach, die Position des Karussells zu steuern.
Die Eigenschaftsdaten-Slide akzeptiert das Schlüsselwort vor oder neben der Änderung der Position der Folie relativ zur aktuellen Position.
Verwenden Sie die Datenklage zu einem rohen Gleitindex am Boden des Karussellbettes. Data-Slide-to = "2" verschiebt den Schieberegler in einen bestimmten Index, und der Index zählt von 0.
Die Eigenschaft data-ride = "Carousel" wird verwendet, um das Karussell zu markieren, das die Animationswiedergabe beginnt, wenn die Seite geladen wird.
Durch JavaScript: Karussell kann manuell durch JavaScript aufgerufen werden, wie unten gezeigt:
$ ('. Carousel'). Carousel ()
4. Optionen
Es gibt einige Optionen, die Dateneigenschaften oder JavaScript übergeben haben. In der folgenden Tabelle werden folgende Optionen aufgeführt:
V. Methode
Hier sind einige nützliche Methoden in Karussell-Plug-Ins:
Vi. Beispiel
Das folgende Beispiel zeigt die Verwendung der Methode:
<! DocType html> <html> <Head> <title> Bootstrap -Instanz - Karussell -Plug -in -Methode </title> <link href = "/bootstrap/css/bootstrap.min src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel indicator--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/media/uploads/2014/07/slide1.png"> </div> <div> <img src="/media/uploads/2014/07/slide2.png"> </div> <div> <img src="/media/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a> <!-- Control Button--> <div style = "text-align: center;"> <Eingabe type = "button" value = "start"> <input type = "button" value = "pause"> <input type = "button" value = "Vorheriger Folie"> <Eingabe type = "button" value = "Nächstes Folie"> <Eingabe-Typ = "Button" -Weicher ". </div> </div> <script> $ (function () {// initialisieren Sie Carousel $ (". Start-Slide"). Click (function () {$ ("#mycarousel"). Carousel ('Cycle');}); // Stop Carousel $ (". }) // karousel $ (". $ (". Next-Slide"). Click (Funktion () {$ ("#mycarousel"). Carousel ('Next');}); $ ("#mycarousel"). Karussell (1); }); </script> </body> </html>Die Ergebnisse sind wie folgt:
Karussell-Plug-in-Methode
7. Ereignisse
In der folgenden Tabelle werden die Ereignisse aufgeführt, die im Karussell-Plug-In verwendet werden sollen. Diese Ereignisse können als Haken in Funktionen verwendet werden.
Beispiel
Das folgende Beispiel zeigt die Verwendung von Ereignissen:
<! DocType html> <html> <kopf> <titels> bootstrap Instance-Carousel-Plug-In-Ereignis </title> <link href = "/bootstrap/css/bootstrap.min src="/bootstrap/js/bootstrap.min.js"></script><body> <div id="myCarousel"> <!-- Carousel metric--> <ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel Project--> <div> <img src="/media/uploads/2014/07/slide1.png"> </div> <div> <img src="/media/uploads/2014/07/slide2.png"> </div> <div> <img src="/media/uploads/2014/07/slide3.png"> </div> </div> <!-- Carousel Navigation--> <a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a></div><script> $(function(){ $ ('#mycarousel'). On ('Slide.bs.Carousel', Funktion () {alert ("blinkt das Ereignis sofort, wenn die Slide -Instanzmethode aufgerufen wird.");}); }); </script> </body> </html>Die Ergebnisse sind wie folgt:
Karussell -Plugin -Events
Nach dem obigen Tutorial habe ich mein eigenes Beispiel gemacht:
Das Karussell-Plug-In spielt in der Reihenfolge mehrere große Bilder derselben Größe.
// Basisbeispiel. <div id = "mycarousel"> <ol> <li data-target = "#mycarousel" data-klide-to = "0"> </li> <li data-target = "#mycarousel" Data-Slide-to = "1"> </li> <li data-target src = "img/dia.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> <img Src = "img/Slide3.png"> </div> <a> </div> </divf = "#mycarous" Data-Slide = "prev"> ‹</a> <a href = "#mycarousel" Data-Slide = "Weiter"> ›</a> </div>
Datenattribut Erläuterung:
1.Data-Slide akzeptiert das Schlüsselwort vor oder als nebenher, um die Position des Objektträgers relativ zur aktuellen Position zu ändern.
2.Data-Slide-to erstellt einen originalen Schieberindex am Boden des Karussells. Data-Slide-to = "2" verschiebt den Schieberegler in einen bestimmten Index, und der Index zählt von 0.
3.Data-ride = "Carousel" Attribut User Tag Carousel startet die Animationswiedergabe, wenn die Seite geladen wird.
Wenn Sie es in JavaScript aufrufen, verwenden Sie die Methode der Schlüsselwertepaar direkt und entfernen Sie die Daten-.
// Setzen Sie benutzerdefinierte Eigenschaften
$ ('#mycarousel'). Carousel ({// Automatische Wiedergabe einstellen/2 Sekunden Intervall: 2000, // Setzen Sie die Ereignis -Pause: 'Hover', // Nur einmal abwickeln: false: false,});Das Karussell -Plugin bietet auch einige Methoden wie folgt:
// Klicken Sie auf die Schaltfläche, um $ ('Schaltfläche') auszuführen. On ('klicken', function () {// Nach dem Klicken, $ ('#mycarousel'). Carousel ('Zyklus'); // andere ähnliche});Ereignis
$ ('#mycarousel'). on ('Slide.bs.Carousel', function () {alert ('sofort frei, wenn der Slide -Instanzmodus aufgerufen wird');}); $ ('#mycarousel'). on ('Slid.bs.Carousel', function () {alert ('frei, wenn das Karussell eine Folie abschließt');});Weitere Inhalte finden Sie unter: Bootstrap Learning Tutorial
Das obige dreht sich alles um diesen Artikel. Ich hoffe, es wird für alle hilfreich sein, das Bootstrap-Karussell-Plug-In zu lernen.