Das Karussell Plugin
Die Karussell-Plugin ist eine Komponente für Elemente Radfahren durch, wie ein Karussell (Diashow).
Tipp: Plugins können einzeln aufgenommen werden (unter Verwendung von Bootstrap's einzelnen "carousel.js" Datei) oder alle auf einmal (mit "bootstrap.js" oder "bootstrap.min.js" ).
Karussell-Beispiel
Chania
Die Atmosphäre in Chania hat einen Hauch von Florenz und Venedig.
Chania
Die Atmosphäre in Chania hat einen Hauch von Florenz und Venedig.
Blumen
Schöne Blumen in Kolymbari, Kreta.
Blumen
Schöne Blumen in Kolymbari, Kreta.
Hinweis: Karussells sind nicht richtig in Internet Explorer 9 und früher unterstützt (weil sie CSS3 Übergänge und Animationen verwenden , um die Dia - Effekt zu erzielen).
Wie man ein Karussell erstellen
Das folgende Beispiel zeigt, wie ein Grund Karussell zu erstellen:
Beispiel
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Versuch es selber " Beispiel erklärt
Die äußerste <div> :
Karusselle erfordern die Verwendung einer ID (in diesem Fall id="myCarousel" ) für Karussellsteuerungen richtig funktionieren.
Die class="carousel" gibt an, dass dieses <div> ein Karussell enthält.
Die .slide Klasse fügt eine CSS - Übergang und Animationseffekt, der die Elemente macht gleiten , wenn ein neues Element darstellt. Lassen Sie diese Klasse, wenn Sie diesen Effekt nicht wollen.
Die data-ride="carousel" Attribut sagt Bootstrap das Karussell sofort beim Laden der Seite zu beginnen animieren.
Die "Indikatoren" Teil:
Die Indikatoren sind die kleinen Punkte am unteren Rand jeder Folie (die angibt, wie viele Folien gibt es in dem Karussell ist, und die schieben Sie den Benutzer sind zur Zeit angezeigt werden sollen).
Die Indikatoren werden in einer geordneten Liste angegeben mit Klasse .carousel-indicators .
Die data-target - Attribut verweist auf die ID des Karussells.
Die data-slide-to spezifiziert zuzuschreiben , die zu gehen gleiten, wenn sie auf dem spezifischen Punkt klicken.
Die "Wrapper für Dias" Teil:
Die Objektträger werden in einer bestimmten <div> mit Klasse .carousel-inner .
Der Inhalt jeder Folie wird in einem definierten <div> mit Klasse .item . Dies kann Text oder Bilder sein.
Die .active Klasse muss eine der Folien hinzugefügt werden. Andernfalls wird das Karussell nicht sichtbar sein.
Die "Linke und rechte Kontrollen" Teil:
Dieser Code fügt hinzu: "links" und "rechts" Tasten, die der Benutzer manuell zu gehen hin und her zwischen den Folien ermöglicht.
Die data-slide - Attribut akzeptiert die Schlüsselwörter "prev" oder "next" , der die Schlittenposition relativ zu seiner aktuellen Position verändert.
Beschriftungen hinzufügen Slides
In <div class="carousel-caption"> innerhalb jedes <div class="item"> eine Beschriftung für jede Folie zu erstellen:
Beispiel
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The
atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
<div
class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
<div
class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Versuch es selber " Füllen Sie Bootstrap - Karussell Referenz
Eine vollständige Referenz aller Karussell Optionen, Methoden und Ereignisse finden Sie auf unserer Bootstrap JS Carousel Referenz .