Bootstrap Carousel

Some websites contain an element which traverse through different child elements on button click or automatically. This element is known as carousel. A bootstrap carousal is used to create fully responsive slideshows. There are a couple of ways to include carousel in your websites. Either you have to individually include “carousel.js” file or you have to include full “bootstrap.js” file which contain code for carousel by default. Take a look at the following example to see how bootstrap carousel works.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        
    </head>

    <body> 
        <div id = "bsCarousel" class = "carousel slide">
   
 
   <ol class = "carousel-indicators">
      <li data-target = "#bsCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#bsCarousel" data-slide-to = "1"></li>
      <li data-target = "#bsCarousel" data-slide-to = "2"></li>
   </ol>   
   

    
   <div class = "carousel-inner">
      <div class = "item active">
         <img src="bsimages/car1.jpg" width="1368" height="600" alt = "First Image">
      </div>
      
      <div class = "item">
         <img src="bsimages/car2.jpg" width="1368" height="600" alt = "Second Image">
      </div>
      
      <div class = "item">
         <img src ="bsimages/car3.jpg" width="1368" height="600" alt = "Third Image">
      </div>
   </div>
   

   <a class = "carousel-control left" href = "#bsCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#bsCarousel" data-slide = "next">&rsaquo;</a>
   
</div>
            
    </body>

</html>

Download the code Try the code

Now pay close attention to the above code. It has been explained line by line as follows:

Inside the body, have a look at the outer div. You must assign an id to this div. This id is later used to manipulate carousel items.
The outer div has a class of “carousel” which specifies that this div shall act as carousel. The class “slide” adds css slide animation affect to the carousel.
Next comes the ordered list with class “carousel-indicators”. This class tells that each item in the list acts as a dot at the bottom of the carousel. The active dot tells the slide which is active. The number of dots is equal to the number of slides.
Within each “li” item, there are data-target and data-slide-to attributes. The former contains the id of the carousel while the later contains the id of the slide which will be opened when the dot is clicked.
Next comes the div with class “carousel-inner”. This div further contains div with class item and within those div the actual item to traverse e.g image, div etc are added. The active item has a class of “active” as well.
Finally the next and previous links are added using anchor tag. The data-slide attribute can have two values “next” and “prev”. These links are used to move between slides.

Bootstrap Carousel With Caption

You can also add captions to each slide within the carousel. To do so, simply add a div with class “carousel-caption” after the item. Next, inside the div add h3 tag and paragraph tag for heading and text purposes. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        
    </head>

    <body> 
        <div id = "bsCarousel" class = "carousel slide">
   
 
   <ol class = "carousel-indicators">
      <li data-target = "#bsCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#bsCarousel" data-slide-to = "1"></li>
      <li data-target = "#bsCarousel" data-slide-to = "2"></li>
   </ol>   
   

    
   <div class = "carousel-inner">
      <div class = "item active">
         <img src="bsimages/car1.jpg" width="1368" height="600" alt = "First Image">
          <div class="carousel-caption">
            <h3>Nice Car</h3>
            <p>This car is extremely pretty.</p>
          </div>
      </div>
      
      <div class = "item">
         <img src="bsimages/car2.jpg" width="1368" height="600" alt = "Second Image">
            <div class="carousel-caption">
            <h3>Nice Car</h3>
            <p>This car is a truck.</p>
          </div>
      </div>
      
      <div class = "item">
         <img src ="bsimages/car3.jpg" width="1368" height="600" alt = "Third Image">
           <div class="carousel-caption">
            <h3>Nice Car</h3>
            <p>This car is old car.</p>
          </div>
      </div>
   </div>
   

   <a class = "carousel-control left" href = "#bsCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#bsCarousel" data-slide = "next">&rsaquo;</a>
   
</div>
            
    </body>

</html>

Download the code Try the code

<<< Bootstrap Input Size OptionsBootstrap Modal >>>