Bootstrap4 Carousel
A carousel is a cyclic slideshow:
How to create a carousel
The following example creates a simple image carousel effect:
Example
<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>
<!--Carousel images-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.jyshare.com/images/mix/img_fjords_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.jyshare.com/images/mix/img_nature_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.jyshare.com/images/mix/img_mountains_wide.jpg">
</div>
</div>
<!--Left and right toggle buttons-->
<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>
Try it Yourself »
Add descriptions to carousel images
In each<div class="carousel-item">add within<div class="carousel-caption">to set the description text of the carousel image:
Example
<div class="carousel-item">
<img src="https://static.jyshare.com/images/mix/img_fjords_wide.jpg">
<div class="carousel-caption">
<h3>First slide description title</h3>
<p>Description text!</p>
</div>
</div>
Try it Yourself »
Description of classes used in the above example
| Class | Description |
|---|---|
.carousel |
Create a carousel |
.carousel-indicators |
Add an indicator for the carousel, which are the small dots below the carousel. During playback, it shows which image is currently displayed. |
.carousel-inner |
Add the images to switch |
.carousel-item |
Specify the content of each image |
.carousel-control-prev |
Add a left button. Clicking it will return to the previous slide. |
.carousel-control-next |
Add a right button. Clicking it will switch to the next slide. |
.carousel-control-prev-icon |
Used with .carousel-control-prev to set the left button. |
.carousel-control-next-icon |
Used with .carousel-control-next to set the right button. |
.slide |
The transition and animation effects of switching images. If you don't need such effects, you can delete this class. |