Skip to content
Related Articles

Related Articles

Improve Article

Bootstrap | Carousel

  • Difficulty Level : Medium
  • Last Updated : 05 Aug, 2021

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: 

html




<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: 
 

 



  • 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: 
 

html




<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: 
 

 

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

html




<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: 
     

html




<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: 
     

html




<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: 
     

html




<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: 
     

html




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

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari
     

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :