Bootstrap 5 carousel
Bootstrap 5 carousel example with 5 slides. You can add any image or text in the slide box. feel free to modify or play with this snippet.
Preview
HTML
CSS
JavaScript
Resources
<div class="container px-4 py-5">
<div class="row g-4 py-5">
<div id="indicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#indicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#indicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#indicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#indicators" data-bs-slide-to="3" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#indicators" data-bs-slide-to="4" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="img-box img-box-1">Box 1</div>
</div>
<div class="carousel-item">
<div class="img-box img-box-2">Box 2</div>
</div>
<div class="carousel-item">
<div class="img-box img-box-3">Box 3</div>
</div>
<div class="carousel-item">
<div class="img-box img-box-4">Box 4</div>
</div>
<div class="carousel-item">
<div class="img-box img-box-5">Box 5</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#indicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#indicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap');
body {
font-family: 'Sen', sans-serif;
}
.img-box{ height: 500px; width: 100%; background: #333; color: #fff; font-size: 72px; text-align: center}
.img-box-1{background: #3f51b5;}
.img-box-2{background: #01579b;}
.img-box-3{background: #004d40;}
.img-box-4{background: #5d4037;}
.img-box-5{background: #455a64;}
div .carousel-indicators [data-bs-target] {
border-radius: 10px;
width: 10px;
height: 10px;
border: 1px solid #fff;
}
Bootstrap = 5.1.3
Download Bootstrap 5 carousel snippet code.
This HTML, CSS, JavaScript and Bootstrap snippet is free (open-source) hence you can use it in your project.
You can modify the above editor code and see the live update. You can also download the modify code.
Feel free to play with Bootstrap 5 carousel snippet code.
If you like it then don't forget to share this code with your friends.
Download Snippet
Free code snippet playground
Let's share the example by using HTML, CSS, JavaScript and Bootstrap.
Add New Snippet