Bootstrap Carousel

The Bootstrap carousel is a flexible, responsive way to add a slider to your site. In addition to being responsive, the content is flexible enough to allow images, iframes, videos, or just about any type of content.

OPTIONAL CAPTIONS
You can add captions to your slides easily with the .carousel-caption element within any .item. Place just about any optional HTML within there and it will be automatically aligned and formatted.

Usage
Via data attributes: Use data attributes to easily control the position of the carousel.

Attribute data-slide accepts the keywords prev or next, which alters the slide position relative to its current position.

Use data-slide-to to pass a raw slide index to the carousel data-slide-to=”2″, which shifts the slide position to a particular index beginning with 0.

The data-ride=”carousel” attribute is used to mark a carousel as animating starting at page load.

Via JavaScript: The carousel can be manually called with JavaScript as below:

$('.carousel').carousel()

Example
A simple slideshow below shows a generic component for cycling through elements like a carousel, using the Bootstrap carousel plugin. To implement the carousel, we just need to add the code with the markup. There is no need for data attributes, just simple class-based development.

<!DOCTYPE html>
<html>
<head>
   <title>Try Bootstrap Online</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
   <!-- 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>   
   <!-- Carousel items -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="/bootstrap/images/slide1.png" alt="First slide">
         <div class="carousel-caption">This is Caption 1</div>
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide2.png" alt="Second slide">
         <div class="carousel-caption">This is Caption 2</div>
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide3.png" alt="Third slide">
         <div class="carousel-caption">This is Caption 3</div>
      </div>
   </div>
   <!-- Carousel nav -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">›</a>
</div> 
<div style="text-align:center;">
      <input type="button" class="btn prev-slide" value="Previous Slide">
      <input type="button" class="btn slide-one" value="Slide 1">
      <input type="button" class="btn slide-two" value="Slide 2">            
      <input type="button" class="btn slide-three" value="Slide 3">
       <input type="button" class="btn next-slide" value="Next Slide">
   </div>
</div> 
<script>
   $(function(){

      // Cycles to the previous item
      $(".prev-slide").click(function(){
         $("#myCarousel").carousel('prev');
      });
           // Cycles the carousel to a particular frame 
      $(".slide-one").click(function(){
         $("#myCarousel").carousel(0);
      });
      $(".slide-two").click(function(){
         $("#myCarousel").carousel(1);
      });
      $(".slide-three").click(function(){
         $("#myCarousel").carousel(2);
      });
       // Cycles to the next item
      $(".next-slide").click(function(){
         $("#myCarousel").carousel('next');
      });
   });
</script>
</body>
</html>

carousel

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Leave a Reply

Your email address will not be published. Required fields are marked *