Bootstrap 4 Karussell
Bootstrap 4 Karussell
Das Karussell ist eine Diashow zum Durchlaufen von Elementen.
So erstellen Sie ein Karussell
Das folgende Beispiel zeigt, wie Sie ein einfaches Karussell mit Indikatoren und Steuerelementen erstellen:
Beispiel
<div id="demo" class="carousel slide" data-ride="carousel">
<!--
Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li
data-target="#demo" data-slide-to="2"></li>
</ul>
<!--
The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg"
alt="Los Angeles">
</div>
<div
class="carousel-item">
<img src="chicago.jpg"
alt="Chicago">
</div>
<div
class="carousel-item">
<img src="ny.jpg"
alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev"
href="#demo" data-slide="prev">
<span
class="carousel-control-prev-icon"></span>
</a>
<a
class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Beispiel erklärt
Eine Beschreibung dessen, was jede Klasse aus dem obigen Beispiel tut:
| Class | Description |
|---|---|
.carousel |
Creates a carousel |
.carousel-indicators |
Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
.carousel-inner |
Adds slides to the carousel |
.carousel-item |
Specifies the content of each slide |
.carousel-control-prev |
Adds a left (previous) button to the carousel, which allows the user to go back between the slides |
.carousel-control-next |
Adds a right (next) button to the carousel, which allows the user to go forward between the slides |
.carousel-control-prev-icon |
Used together with .carousel-control-prev to create a "previous" button |
.carousel-control-next-icon |
Used together with .carousel-control-next to create a "next" button |
.slide |
Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
Untertitel zu Folien hinzufügen
Die Engel
Wir hatten so eine tolle Zeit in LA!
Chicago
Danke Chicago!
New York
Wir lieben den Big Apple!
Fügen Sie <div class="carousel-caption">in jedem Element Elemente hinzu <div
class="carousel-item">, um eine Beschriftung für jede Folie zu erstellen:
Beispiel
<div class="carousel-item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los
Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
Vollständige Bootstrap-Karussell-Referenz
Eine vollständige Referenz aller Karusselloptionen, -methoden und -ereignisse finden Sie in unserer Bootstrap JS Carousel Reference .