Bootstrap 4 Carrousel
Bootstrap 4 Carrousel
Die Carousel is 'n skyfievertoning om deur elemente te fiets.
Hoe om 'n karrousel te skep
Die volgende voorbeeld wys hoe om 'n basiese karrousel met aanwysers en kontroles te skep:
Voorbeeld
<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>
Voorbeeld verduidelik
'n Beskrywing van wat elke klas uit die voorbeeld hierbo doen:
| 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 |
Voeg onderskrifte by skyfies
Die Engele
Ons het so lekker gekuier in LA!
Chicago
Dankie, Chicago!
New York
Ons is mal oor die Groot Appel!
Voeg elemente binne - <div class="carousel-caption">in elke <div
class="carousel-item">by om 'n byskrif vir elke skyfie te skep:
Voorbeeld
<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>
Voltooi Bootstrap Carrousel Verwysing
Vir 'n volledige verwysing van alle karrousel-opsies, -metodes en -geleenthede, gaan na ons Bootstrap JS-karrouselverwysing .