Image Carousel (auto slide Optional captions) example: a hand-crafted, open-source Bootstrap 5 carousel. HTML included, ready to copy.
1<div class="container">
2
3<!--Carousel Wrapper-->
4<div id="carousel-example-2" class="carousel slide carousel-fade" data-bs-ride="carousel">
5 <!--Indicators-->
6 <ol class="carousel-indicators">
7 <li data-bs-target="#carousel-example-2" data-bs-slide-to="0" class="active"></li>
8 <li data-bs-target="#carousel-example-2" data-bs-slide-to="1"></li>
9 <li data-bs-target="#carousel-example-2" data-bs-slide-to="2"></li>
10 </ol>
11 <!--/.Indicators-->
12 <!--Slides-->
13 <div class="carousel-inner" role="listbox">
14 <div class="carousel-item active">
15 <div class="view">
16 <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
17 <div class="mask rgba-black-light"></div>
18 </div>
19 <div class="carousel-caption">
20 <h3 class="h3-responsive">Light mask</h3>
21 <p>First text</p>
22 </div>
23 </div>
24 <div class="carousel-item">
25 <!--Mask color-->
26 <div class="view">
27 <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
28 <div class="mask rgba-black-strong"></div>
29 </div>
30 <div class="carousel-caption">
31 <h3 class="h3-responsive">Strong mask</h3>
32 <p>Secondary text</p>
33 </div>
34 </div>
35 <div class="carousel-item">
36 <!--Mask color-->
37 <div class="view">
38 <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
39 <div class="mask rgba-black-slight"></div>
40 </div>
41 <div class="carousel-caption">
42 <h3 class="h3-responsive">Slight mask</h3>
43 <p>Third text</p>
44 </div>
45 </div>
46 </div>
47 <!--/.Slides-->
48 <!--Controls-->
49 <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-bs-slide="prev">
50 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
51 <span class="visually-hidden">Previous</span>
52 </a>
53 <a class="carousel-control-next" href="#carousel-example-2" role="button" data-bs-slide="next">
54 <span class="carousel-control-next-icon" aria-hidden="true"></span>
55 <span class="visually-hidden">Next</span>
56 </a>
57 <!--/.Controls-->
58</div>
59<!--/.Carousel Wrapper-->
60
61</div> 
Bootstrap 5 carousel with multiple cards
Free Bootstrap 5 carousel snippet — Bootstrap 5 carousel with multiple cards. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
Sliding tabs | CSS transitions only
Sliding tabs | CSS transitions only — a free Bootstrap 5 carousel snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Bootstrap Services in circle slider snippet
Bootstrap Services in circle slider snippet: a hand-crafted, open-source Bootstrap 5 carousel. HTML, CSS & JS included, ready to copy.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.