twitter-bootstrap
Karussells
Suche…
Bemerkungen
Weitere Informationen finden Sie in der offiziellen Dokumentation unter http://getbootstrap.com/javascript/#carousel , von der die grundlegenden HTML- und Javascript-Verwendungsbeispiele und Informationen abgeleitet werden.
Es ist zu beachten, dass Karussells aufgrund der Verwendung von CSS3-Übergängen / Animationen im IE 9 und früheren Versionen nicht ordnungsgemäß funktionieren.
Grundlegende HTML-Verwendung
Ein Bootstrap-Karussell ist eine Bootstrap-Komponente, die eine Diashow erstellt, die Elemente innerhalb des Karussells durchläuft.
Hier ist ein einfaches Beispiel für die Verwendung von HTML:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Grundlegende Verwendung und Initialisierung von Javascript
Karussellkomponenten können über jQuery mit der Funktion $('.carousel').carousel(options)
instanziiert werden, wobei $('.carousel')
eine Referenz auf ein bestimmtes Karussell ist und options
ein Javascript-Objekt, das das Karussell angibt Standardattribute.
Mit dem options
können mehrere Eigenschaften definiert werden, die das Verhalten des Karussells beeinflussen. Diese Eigenschaften sind als solche definiert:
- Die
interval
akzeptiert einen Javascript-number
, mit dem ein Benutzer die Zeitdauer definieren kann, für die das Karussell eine bestimmte Karussell-Folie anzeigt. Wenn der boolesche Wertfalse
angegeben wird, wird das Karussell nicht automatisch durchlaufen. - Die
pause
Eigenschaft akzeptiert einen Javascript-string
das Verhalten umschaltet, wenn der automatische Zyklus des Karussells angehalten wird, wenn die Maus des Benutzers in das Karussell eintritt. Der standardmäßige (und einzige) akzeptierte Wert ist "hover". - Die
wrap
Eigenschaft akzeptiert einenboolean
Javascript-Typ, mit dem ein Benutzer definieren kann, ob das Karussell fortlaufend durchlaufen werden soll, ohne auf einer bestimmten Folie anhalten zu müssen. - Die
keyboard
akzeptiert einenboolean
Javascript-Typ, mit dem ein Benutzer definieren kann, ob das Karussell auf Tastaturereignisse reagieren soll oder nicht.
Hier ist ein Beispiel für die grundlegende Verwendung von Javascript:
$('#carCarousel').carousel({ interval: 2500, pause: "hover", wrap: false, keyboard: true });
Wie bei anderen Bootstrap-Komponenten können die Optionen des Karussells auch über Datenattribute in HTML festgelegt werden.