Menu
Bootstrap 5 Carousel
Carousel / Slideshow
The Carousel is a slideshow for cycling through elements:
How To Create a Carousel
The following example shows how to create a basic carousel with indicators and controls:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<!– Carousel –>
<div id=”demo” data-bs-ride=”carousel”>
<!– Indicators/dots –>
<div>
<button type=”button” data-bs-target=”#demo” data-bs-slide-to=”0″></button>
<button type=”button” data-bs-target=”#demo” data-bs-slide-to=”1″></button>
<button type=”button” data-bs-target=”#demo” data-bs-slide-to=”2″></button>
</div>
<!– The slideshow/carousel –>
<div>
<div>
<img src=”la.jpg” alt=”Los Angeles” style=”width:100%”>
</div>
<div>
<img src=”chicago.jpg” alt=”Chicago” style=”width:100%”>
</div>
<div>
<img src=”ny.jpg” alt=”New York” style=”width:100%”>
</div>
</div>
<!– Left and right controls/icons –>
<button type=”button” data-bs-target=”#demo” data-bs-slide=”prev”>
<span></span>
</button>
<button type=”button” data-bs-target=”#demo” data-bs-slide=”next”>
<span></span>
</button>
</div>
<div>
<h3>Carousel Example</h3>
<p>The following example shows how to create a basic carousel with indicators and controls.</p>
</div>
</body>
</html>
Example explained
A description of what each class from the example above do:
| 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 elements inside <div> within each <div> to create a caption for each slide:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<!– Carousel –>
<div id=”demo” data-bs-ride=”carousel”>
<!– Indicators/dots –>
<div>
<button type=”button” data-bs-target=”#demo” data-bs-slide-to=”0″></button>
<button type=”button” data-bs-target=”#demo” data-bs-slide-to=”1″></button>
<button type=”button” data-bs-target=”#demo” data-bs-slide-to=”2″></button>
</div>
<!– The slideshow/carousel –>
<div>
<div>
<img src=”la.jpg” alt=”Los Angeles” style=”width:100%”>
<div>
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div>
<img src=”chicago.jpg” alt=”Chicago” style=”width:100%”>
<div>
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div>
<img src=”ny.jpg” alt=”New York” style=”width:100%”>
<div>
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!– Left and right controls/icons –>
<button type=”button” data-bs-target=”#demo” data-bs-slide=”prev”>
<span></span>
</button>
<button type=”button” data-bs-target=”#demo” data-bs-slide=”next”>
<span></span>
</button>
</div>
<div>
<h3>Carousel Example</h3>
<p>The following example shows how to create a basic carousel with indicators and controls.</p>
</div>
</body>
</html>