Open In App

Bootstrap 5 Carousel With Indicators

Last Updated : 02 Feb, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
          crossorigin="anonymous">
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
            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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
                        height="400px" width="400px"
                        alt="Java" class="d-block w-100">
                    </div>
                    <div class="carousel-item">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"
                        height="400px" width="400px"
                        alt="HTML" class="d-block w-100">
                    </div>
                    <div class="carousel-item">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"
                            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=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"


          integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"


          crossorigin="anonymous">


    <script src=


"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"


            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=


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"


                            height="400px" width="400px" 


                            alt="Java" class="d-block w-100">


                    </div>


                    <div class="carousel-item">


                        <img src=


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"


                            height="400px" width="400px" 


                            alt="HTML" class="d-block w-100">


                    </div>


                    <div class="carousel-item">


                        <img src=


"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png"


                            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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Carousel With Controls
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Carousel With Captions
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                What are Different Types of Carousel Indicators in Bootstrap ?
            

        
    
        
            

                How to Create Carousel with Progress Indicators in Bootstrap ?
            

        
    
        
            

                Bootstrap 5 Carousel Individual .carousel-item interval
            

        
    
        
            

                Image Carousel using react-native-snap-carousel package
            

        
    
        
            

                Angular PrimeNG Galleria Indicators
            

        
    
        
            

                Bootstrap 4 | Carousel
            

        
    
        
            

                How to display bootstrap carousel with three post in each slide?
            

        
    
        
            

                How to wrap text around circular carousel in Bootstrap 4 ?
            

        
    
        
            

                How to Design Half-Page Carousel in Bootstrap ?
            

        
    
        
            

                Bootstrap 5 | Carousel
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        21mcsrltd                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox