Bootstrap | Carousel - GeeksforGeeks

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"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">    </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= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190603152813/ml_gaming.png">                </div>                 <div class="item">                    <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190528184201/gateexam.png">                </div>                 <div class="item">                    <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190507183137/Embedded-System-Programming-Languages.png">                </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"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">    </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= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190603152813/ml_gaming.png">                    <div class="carousel-caption">                        <b><h1 class="text-success">GeeksforGeeks</h1>                         <p>Join Geeks Classes</p></b>                    </div>                </div>                <div class="item">                    <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190507183137/Embedded-System-Programming-Languages.png">                    <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 rightExample:  
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 wantExample:  
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 partExample:  
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 carouselExample:  
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 
 
ysachin2314
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?