Bootstrap Carousel Plugin
Das Bootstrap-Karussell-Plugin ist eine flexible und responsive Möglichkeit, Slider zu Ihrer Website hinzuzufügen. Darüber hinaus ist der Inhalt flexibel genug für Bilder, iframes, Videos oder jeden anderen Inhalt, den Sie einbinden möchten.
Wenn Sie auf die Funktionalität des Plugins separat verweisen möchten, müssen Sie aufcarousel.jsverweisen. Alternativ können Sie, wie im KapitelBootstrap Plugins Overviewerwähnt, verweisen aufbootstrap.jsoder die komprimierte Version vonbootstrap.min.js。
Beispiel
Unten ist eine einfache Diashow, die das Bootstrap Carousel Plugin verwendet, um eine generische Komponente zum Durchlaufen von Elementen anzuzeigen. Um das Karussell zu implementieren, müssen Sie nur den Code mit diesem Markup hinzufügen. Es sind keine Datenattribute erforderlich; eine einfache klassenbasierte Entwicklung reicht aus.
Beispiel
<div id="myCarousel" class="carousel slide">
<!--Karussell-Indikatoren-->
<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>
</ol>
<!--Karussell-Elemente-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!--Karussell-Navigation-->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
Ausprobieren »
Das Ergebnis ist wie folgt:
Optionale Beschriftungen
Sie können.iteminnerhalb des.carousel-caption-Elements verwenden, um Beschriftungen zu Folien hinzuzufügen.
Beispiel
<div id="myCarousel" class="carousel slide">
<!--Karussell-Indikatoren-->
<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>
</ol>
<!--Karussell-Elemente-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
<div class="carousel-caption">Caption 1</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
<div class="carousel-caption">Caption 2</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
<div class="carousel-caption">Caption 3</div>
</div>
</div>
<!--Karussell-Navigation-->
<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">Weiter</span>
</a>
</div>
Ausprobieren »
Das Ergebnis ist wie folgt:
Nutzung
- Über Datenattribute: Die Verwendung von Datenattributen macht es einfach, die Position des Karussells zu steuern.
- Attributdata-slideakzeptiert das Schlüsselwortprevodernext, das verwendet wird, um die Position der Folie relativ zu ihrer aktuellen Position zu ändern.
- Verwenden Siedata-slide-to, um einen rohen Folienindex an das Karussell zu übergeben,data-slide-to="2"wodurch der Schieberegler zu einem bestimmten Index bewegt wird, wobei die Indizierung bei 0 beginnt.
- data-ride="carousel"Das Attribut wird verwendet, um zu markieren, dass das Karussell beim Laden der Seite mit der Animation beginnt.
- Über JavaScript: Das Karussell kann manuell über JavaScript aufgerufen werden, wie unten gezeigt:
$('.carousel').carousel()
Optionen
Einige Optionen werden über Datenattribute oder JavaScript übergeben. Die folgende Tabelle listet diese Optionen auf:
| Optionsname | Typ / Standardwert | Datenattribut-Name | Beschreibung |
|---|---|---|---|
| interval | number Standard: 5000 | data-interval | Die Verzögerung zwischen dem automatischen Wechseln der Elemente. Bei false wechselt das Karussell nicht automatisch. |
| pause | string Standard: "hover" | data-pause | Pausiert das Karussell beim Betreten mit der Maus und setzt es fort, wenn die Maus das Karussell verlässt. |
| wrap | boolesch Standard: true | data-wrap | Gibt an, ob das Karussell kontinuierlich läuft. |
Methoden
Unten sind einige nützliche Methoden im Carousel-Plugin aufgeführt:
| Methode | Beschreibung | Beispiel |
|---|---|---|
| .carousel(options) | Initialisiert das Karussell mit einem optionalen Options-Objekt und beginnt mit dem Wechseln der Elemente. |
$('#identifier').carousel({
interval: 2000
})
|
| .carousel('cycle') | Wechselt die Karussell-Elemente von links nach rechts. |
$('#identifier').carousel('cycle')
|
| .carousel('pause') | Stoppt das Karussell beim Wechseln der Elemente. |
$('#identifier').carousel('pause') |
| .carousel(number) | Wechselt das Karussell zu einem bestimmten Frame (die Zählung beginnt bei 0, ähnlich wie bei einem Array). |
$('#identifier').carousel(number) |
| .carousel('prev') | Wechselt das Karussell zum vorherigen Element. |
$('#identifier').carousel('prev') |
| .carousel('next') | Wechselt das Karussell zum nächsten Element. |
$('#identifier').carousel('next') |
Beispiel
Das folgende Beispiel demonstriert die Verwendung der Methoden:
Beispiel
<div id="myCarousel" class="carousel slide">
<!--Karussell-Indikatoren-->
<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>
</ol>
<!--Karussell-Elemente-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!--Karussell-Navigation-->
<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>
<!--Steuertasten-->
<div style="text-align:center;">
<input type="button" class="btn start-slide" value="Start">
<input type="button" class="btn pause-slide" value="Pause">
<input type="button" class="btn prev-slide" value="Vorherige Folie">
<input type="button" class="btn next-slide" value="Nächste Folie">
<input type="button" class="btn slide-one" value="Folie 1">
<input type="button" class="btn slide-two" value="Folie 2">
<input type="button" class="btn slide-three" value="Folie 3">
</div>
</div>
<script>
$(function(){
//Karussell initialisieren
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
//Karussell stoppen
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
//Zum vorherigen Element wechseln
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
//Zum nächsten Element wechseln
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
//Zu einem bestimmten Frame wechseln
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>
Ausprobieren »
Das Ergebnis ist wie folgt:
Ereignisse
Die folgende Tabelle listet die im Carousel-Plugin verwendeten Ereignisse auf. Diese Ereignisse können als Hooks in Funktionen verwendet werden.
| Ereignis | Beschreibung | Beispiel |
|---|---|---|
| slide.bs.carousel | Dieses Ereignis wird sofort ausgelöst, wenn die Folien-Instanzenmethode aufgerufen wird. |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | Dieses Ereignis wird ausgelöst, wenn das Karussell den Folienübergangseffekt abschließt. |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
Beispiel
Das folgende Beispiel demonstriert die Verwendung von Ereignissen:
Beispiel
<div id="myCarousel" class="carousel slide">
<!--Karussell-Indikatoren-->
<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>
</ol>
<!--Karussell-Elemente-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!--Karussell-Navigation-->
<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>
<script>
$(function(){
$('#myCarousel').on('slide.bs.carousel', function () {
alert("Dieses Ereignis wird sofort ausgelöst, wenn die Folien-Instanzenmethode aufgerufen wird.");
});
});
</script>
Ausprobieren »
Das Ergebnis ist wie folgt:
