Bootstrap 4 Tutorial
BS4 Carousel
Bootstrap 4 Carousel
A slideshow that cycles over elements is called a carousel.
==== IMAGE MUKAVI ====
How To Create a Carousel
An illustration of how to make a simple carousel with controls and indicators can be found below:
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>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Los Angeles" title="BS4 Carousel 1" data-lazy-src="la.jpg"><noscript><img decoding="async" src="la.jpg" alt="Los Angeles" title="BS4 Carousel 1"></noscript>
</div>
<div class="carousel-item">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Chicago" title="BS4 Carousel 2" data-lazy-src="chicago.jpg"><noscript><img decoding="async" src="chicago.jpg" alt="Chicago" title="BS4 Carousel 2"></noscript>
</div>
<div class="carousel-item">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="New York" title="BS4 Carousel 3" data-lazy-src="ny.jpg"><noscript><img decoding="async" src="ny.jpg" alt="New York" title="BS4 Carousel 3"></noscript>
</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>
Example explained
An explanation of the functions of each class in the previous example:
| 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 |
Add Captions to Slides
==== IMAGE MUKAVI ====
To make a caption for each slide, add components inside <div class=”carousel-caption”> within each <div class=”carousel-item”>:
Example
<div class="carousel-item">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Los Angeles" title="BS4 Carousel 1" data-lazy-src="la.jpg"><noscript><img decoding="async" src="la.jpg" alt="Los Angeles" title="BS4 Carousel 1"></noscript>
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
