Prev Page
Next Page  
Bootstrap Carousel
The Bootstrap carousel is a flexible, responsive  slider. to a webpage. It is very responsive and flexible enough to allow, images, iframes, videos, or any other type of content that you want to add.

The bootstrap carousel plugin is a component for cycling through elements, like a carousel (slideshow).
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Carousel</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
    <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="images/slide-1.jpg" alt="Slider 1" style="width:100%;">
          </div>
        
          <div class="item">
            <img src="images/slide-2.jpg" alt="Slider 2" style="width:100%;">
          </div>
        
          <div class="item">
            <img src="images/slide-3.jpg" alt="Slider 3" style="width:100%;">
          </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>
    
</div>
 
</body>
</html>
Output :
Bootstrap Carousel With Caption
You can add captions to your slides easily with the <div class="carousel-caption"> within each <div class="item"> to create a caption for each slide element within any .item. 
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Carousel With Caption</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
    <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="images/slide-1.jpg" alt="Slider 1" style="width:100%;">
              <div class="carousel-caption">
              <h3>First Slider</h3>
              <p>This is sample text from Free Time Learning.</p>
            </div>
          </div>
        
          <div class="item">
            <img src="images/slide-2.jpg" alt="Slider 2" style="width:100%;">
            <div class="carousel-caption">
              <h3>Second Slider</h3>
              <p>This is sample text from Free Time Learning.</p>
            </div>
          </div>
        
          <div class="item">
            <img src="images/slide-3.jpg" alt="Slider 3" style="width:100%;">
            <div class="carousel-caption">
              <h3>Third Slider</h3>
              <p>This is sample text from Free Time Learning.</p>
            </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>
    
</div>
 
</body>
</html>
Output :
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".
Name type default description
interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause string | null "hover" If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to null, hovering over the carousel won't pause it.
wrap boolean true Whether the carousel should cycle continuously or have hard stops.
keyboard boolean true Whether the carousel should react to keyboard events.
Methods
Click Here the following link.
carousel methods
Events
Bootstrap's carousel class exposes two events for hooking into carousel functionality which are listed in the following table.
Event Description Example
slide.bs.carousel This event fires immediately when the slide instance method is invoked.
$('#identifier').on('slide.bs.carousel', function () { // do something })
slid.bs.carousel This event is fired when the carousel has completed its slide transition.
$('#identifier').on('slid.bs.carousel', function () { // do something }) 
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Carousel Events</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
    <div id="myCarousel" class="carousel slide">
       <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>   
       
       <div class="carousel-inner">
          <div class ="item active">
             <img src="images/slide-1.jpg" alt="First slide">
          </div>
          
          <div class = "item">
             <img src="images/slide-2.jpg" alt = "Second slide">
          </div>
          
          <div class = "item">
             <img src="images/slide-3.jpg" alt = "Third slide">
          </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> 
    
    <script>
       $(function() {
          $('#myCarousel').on('slide.bs.carousel', function () {
             alert("Please click Ok  button.");
          });
       });
    </script>
    
</div>
 
</body>
</html>
Output :
Bootstrap events
  Prev Page
Next Page