Bootstrap 5 Carousel With indicators are used to create indicators in the carousel. We can click on these indicators, to change from one slide to another.
Bootstrap 5 Carousel With Indicators Classes:
- carousel-indicators: This class is used for including carousel indicators in the HTML div container.
Syntax:
<ul class="carousel-indicators"> <li data-target="#GFG" data-slide-to="0" class="active"> </li> ... </ul>
Example 1: In this example, we will learn about carousels with indicators.
HTML
<!DOCTYPE html> < html >
< head >
<!-- Bootstrap CDN -->
< link rel = "stylesheet"
href =
integrity = "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity = "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2 text-center" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap 5 Carousel With Indicators</ h3 >
< div id = "GFG" class="carousel
slide carousel-fade"
data-ride = "carousel" >
<!-- Indicators -->
< ul class = "carousel-indicators" >
< li data-target = "#GFG" data-slide-to = "0"
class = "active" >
</ li >
< li data-target = "#GFG" data-slide-to = "1" >
</ li >
< li data-target = "#GFG" data-slide-to = "2" >
</ li >
</ ul >
<!-- The slideshow -->
< div class = "carousel-inner" >
< div class = "carousel-item active" >
< img src =
height = "400px" width = "400px"
alt = "Java" class = "d-block w-100" >
</ div >
< div class = "carousel-item" >
< img src =
height = "400px" width = "400px"
alt = "HTML" class = "d-block w-100" >
</ div >
< div class = "carousel-item" >
< img src =
height = "400px" width = "400px"
alt = "Angular" class = "d-block w-100" >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will add controls along with Indicators
HTML
<!DOCTYPE html> < html >
< head >
<!-- Bootstrap CDN -->
< link rel = "stylesheet"
href =
integrity = "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin = "anonymous" >
< script src =
integrity = "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2 text-center" >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap 5 Carousel With Indicators</ h3 >
< div id = "GFG" class="carousel slide
carousel-fade" data-ride = "carousel" >
<!-- Indicators -->
< ul class = "carousel-indicators" >
< li data-target = "#GFG" data-slide-to = "0"
class = "active" >
</ li >
< li data-target = "#GFG" data-slide-to = "1" ></ li >
< li data-target = "#GFG" data-slide-to = "2" ></ li >
</ ul >
<!-- The slideshow -->
< div class = "carousel-inner" >
< div class = "carousel-item active" >
< img src =
height = "400px" width = "400px" alt = "Java" class = "d-block w-100" >
</ div >
< div class = "carousel-item" >
< img src =
height = "400px" width = "400px" alt = "HTML" class = "d-block w-100" >
</ div >
< div class = "carousel-item" >
< img src =
height = "400px" width = "400px"
alt = "Angular" class = "d-block w-100" >
</ div >
< a class = "carousel-control-prev"
href = "#GFG" data-slide = "prev" >
< span class = "carousel-control-prev-icon" >
</ span >
</ a >
< a class = "carousel-control-next"
href = "#GFG" data-slide = "next" >
< span class = "carousel-control-next-icon" >
</ span >
</ a >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
References: https://getbootstrap.com/docs/5.0/components/carousel/#with-indicators