Open In App

Bootstrap | Carousel

Improve
Improve
Like Article
Like
Save
Share
Report

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 in 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 an image slideshow using the bootstrap carousel.

Example: 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap | Carousel</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <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>
</html>


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 that indicate how many slides there, are 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 is given to the 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 allow 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




<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap | Carousel</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <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>
</html>


Output:

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

Example: 

Javascript




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


  • PAUSE: Stops the carousel from moving wherever you want.

Example: 

Javascript




<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 an array).

Example:

Javascript




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


  • PREV: Cycles the carousel to its previous image, it’s just like we did earlier in the bootstrap part.

Example:

Javascript




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


  • NEXT: Cycles the carousel to its next image, it’s the same as we did in the bootstrap part of the carousel.

Example: 

Javascript




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


 

Supported Browsers:

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


Last Updated : 31 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads