Image Carousel (auto slide Optional captions) example

Carousels Bootstrap 5Free

Image Carousel (auto slide Optional captions) example: a hand-crafted, open-source Bootstrap 5 carousel. HTML included, ready to copy.

3.3k views106 downloads5 years ago

gosnippets.com/preview/image-carousel-(auto-slide-optional-captions)-example

Source Code

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>

More Carousels snippets

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.

CarouselsView →

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.

CarouselsView →

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.

CarouselsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="container"> 2 3 4<div id="carousel-example-2" class="carousel slide carousel-fade" data-bs-ride="carousel"> 5  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  12  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  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  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  48  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  58</div> 59 60 61</div>