Skip to content
Related Articles

Related Articles

Bootstrap | Carousel
  • Difficulty Level : Medium
  • Last Updated : 26 Jun, 2019

In this article, we will see how to create an image slide show for your webpage to make it look more attractive. For this we will use bootstrap Carousel.

It can be included into your webpage using “bootstrap.js” or “bootstrap.min.js”. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect.

This is how we can create a image slideshow using bootstrap carousel

Example:




<head>
    <title>Bootstrap | Carousel</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <h4>Bootstrap | Carousel</h4>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
  
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src=
                </div>
  
                <div class="item">
                    <img src=
                </div>
  
                <div class="item">
                    <img src=
                </div>
            </div>
           
            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
      </div>
  </center>
</body>

Output:



    Explanation of The Above Code :

  • The “Wrapper for slides” part : The slides are specified in a div with class=”carousel-inner”.The content of each image in a slideshow is defined in a div tag with class=”item”. This can be text or images.The class=”active” is added to one of the slides. Otherwise, the images of the slideshow will not be visible.
  • The outermost div : The class=”carousel” tells us that this div tag contains a carousel.The class=”carousel-slide” adds a CSS transition and animation effect to the images,thus making them slide when showing a new item. If you do not want this effect,then do not put this class.The data-ride=”carousel” attribute tells Bootstrap to begin the slideshow immediately when the page loads.
  • The “Indicators” part : The indicators are the little dots at the bottom of each slide which indicates how many slides there, and which slide we are currently viewing.The indicators are specified in an ordered list with class=”carousel-indicators”. The data-target attribute points to the id of the carousel which are given to their numbers appearing in the slideshow. The data-slide-to attribute makes the image slide the image it has been assigned to, when clicking on the specific dot.
  • The “Left and right controls” part : This code adds “left” and “right” buttons that allows the us to go back and forth between the slides manually. The data-slide attribute accepts the keywords “prev” or “next”, which changes the slide position against its current position.

To Add Caption to the Slide

Add class=”carousel-caption” within each div class=”item” to create a caption for each slide.
Example:




<head>
    <title>Bootstrap | Carousel</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
          
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                  
            </ol>
  
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src=
                    <div class="carousel-caption">
                        <b><h1 class="text-success">GeeksforGeeks</h1>
                        <p>Join Geeks Classes</p></b>
                    </div>
                </div>
                <div class="item">
                    <img src=
                    <div class="carousel-caption">
                        <b><h1 class="text-primary">GeeksforGeeks</h1>
                        <p>Join Geeks Classes</p></b>
                    </div>
                </div>
            </div>
           
            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
      </div>
  </center>
</body>

Output:

    Usage of Carousels with the help of JavascriptJust call the carousel() method with the id or class selector of the wrapper element in your JavaScript code.

    Example:




    <script type="text/javascript">
    $(document).ready(function(){
        $("#myCarousel").carousel();
    })
    </script>

    Their are certain options that we can use with this carousel() in JavaScript for the control of the images that in how much time they are going to change etc.

  • CYCLE: It cycles through the carousel from left to right
    Example:




    <script type="text/javascript">
    $(document).ready(function(){
        $(".start-slide").click(function(){
            $("#myCarousel").carousel('cycle');
        });
    });
    </script>
  • PAUSE: Stops the carousel from moving where ever you want
    Example:




    <script type="text/javascript">
    $(document).ready(function(){
        $(".pause-slide").click(function(){
            $("#myCarousel").carousel('pause');
        });
    });
    </script>
  • NUMBER: It cycles the carousel according to a particular frame(starting from 0, just like in array)
    Example:




    <script type="text/javascript">
    $(document).ready(function(){
        $(".slide-three").click(function(){
            $("#myCarousel").carousel(3);
        });
    });
    </script>
  • PREV: Cycles the carousel to its previous image,its just like we did earlier in the bootstrap part
    Example:




    <script type="text/javascript">
    $(document).ready(function(){
        $(".prev-slide").click(function(){
            $("#myCarousel").carousel('prev');
        });
    });
    </script>
  • NEXT: Cycles the carousel to its next image,its same as we did in the bootstrap part of carousel
    Example:




    <script type="text/javascript">
    $(document).ready(function(){
        $(".next-slide").click(function(){
            $("#myCarousel").carousel('next');
        });
    });
    </script>

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :