JS Carousel (carousel.js)
Die Karussell-Plugin ist eine Komponente für Elemente Radfahren durch, wie ein Karussell (Diashow).
Ein Tutorial über Karussells, unsere lesen Bootstrap Karussell Tutorial .
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).
Die Karussell-Plugin Klassen
| Klasse | Beschreibung |
|---|---|
| .carousel | Erstellt ein Karussell |
| .slide | Fügt einen CSS-Übergang und Animationseffekt, wenn von einem Element zum nächsten schieben. Entfernen Sie diese Klasse, wenn Sie diesen Effekt nicht wollen |
| .carousel-indicators | Fügt Indikatoren für das Karussell. Dies sind die kleinen Punkte am unteren Rand jeder Folie (die angibt, wie viele Folien gibt es in dem Karussell sind, und die schieben Sie den Benutzer sind gerade anzeigen) |
| .carousel-inner | Fügt Folien zu dem Karussell |
| .item | Gibt den Inhalt jeder Folie |
| .left carousel-control | Fügt eine linke Taste auf dem Karussell, die der Benutzer zwischen den Schlitten zurück zu gehen erlaubt |
| .right carousel-control | Fügt eine rechts-Taste, um das Karussell, die der Benutzer nach vorne zwischen den Folien gehen können |
| .carousel-caption | Gibt eine Beschriftung für das Karussell |
Via data-* Attribute
Die data-ride="carousel" Attribut aktiviert das Karussell.
Die data-slide und data-slide-to - Attribute gibt an, welche um zu gehen gleiten.
Die data-slide Attribut akzeptiert zwei Werte: zurück oder nächste, während data-slide-to - Nummern akzeptieren.
Beispiel
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
Versuch es selber " Via JavaScript
Aktivieren Sie manuell mit:
Beispiel
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Versuch es selber " Karussell-Optionen
Die Optionen können über Datenattribute oder JavaScript übergeben werden. Für die Datenattribute, hängen Sie den Optionsnamen an Daten-, wie in Daten-Intervall = "".
| Name | Art | Standard | Beschreibung | Versuch es |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Gibt die Verzögerung (in Millisekunden) zwischen jeder Folie. Hinweis: Stellen Sie Intervall auf false um die Elemente zu stoppen automatisch Schiebe | Mit JS Mit den Daten |
| pause | string, or the boolean false | "hover" | Pausiert das Karussell nicht mehr durch die nächste Folie, wenn der Mauszeiger das Karussell eintritt, und nimmt die Schiebe, wenn der Mauszeiger das Karussell verlässt Hinweis: Stellen Sie Pause auf false die Fähigkeit , auf schweben zu pausieren zu stoppen | Mit JS Mit den Daten |
| wrap | boolean | true | Gibt an, ob das Karussell kontinuierlich durch alle Folien gehen sollte, oder auf der letzten Folie zu stoppen
| Mit JS Mit den Daten |
Karussell-Methoden
Die folgende Tabelle listet alle verfügbaren Karussell Methoden.
| Methode | Beschreibung | Versuch es |
|---|---|---|
| .carousel( options ) | Aktiviert das Karussell mit einer Option. Siehe oben stehenden Optionen für gültige Werte | Versuch es |
| .carousel("cycle") | Geht durch das Karussell Elemente von links nach rechts | Versuch es |
| .carousel("pause") | Stoppt das Karussell aus gehen durch Artikel | Versuch es |
| .carousel(number) | Geht auf einen bestimmten Punkt (Null-basiert: erste Element 0 ist, ist an zweiter Punkt 1, etc ..) | Versuch es |
| .carousel("prev") | Geht zum vorherigen Artikel | Versuch es |
| .carousel("next") | Geht zum nächsten Artikel | Versuch es |
Karussell-Events
Die folgende Tabelle listet alle verfügbaren Karussell Ereignisse.
| Event | Beschreibung | Versuch es |
|---|---|---|
| slide.bs.carousel | Tritt ein, wenn das Karussell ist etwa von einem Punkt zum anderen zu schieben | Versuch es |
| slid.bs.carousel | Tritt ein, wenn das Karussell von einem Element zum anderen Schiebe beendet hat | Versuch es |
Beispiele
Bildunterschriften 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 "