Bootstrap Carousel Plugin

Advertisements


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 that you might want.

If you want to include this plugin functionality individually, then you will need carousel.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

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, you just need to add the code with the markup. There is no need for data attributes, just simple class-based development.

<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>
      <div class="item">
         <img src="/bootstrap/images/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide3.png" alt="Third slide">
      </div>
   </div>
   <!-- Carousel nav -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
</div> 
Simple Carousal Plugin Demo

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. Following example demonstrates this:

<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 Caption 1</div>
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide2.png" alt="Second slide">
         <div class="carousel-caption">This Caption 2</div>
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide3.png" alt="Third slide">
         <div class="carousel-caption">This Caption 3</div>
      </div>
   </div>
   <!-- Carousel nav -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
</div> 
Carousal Plugin Caption Demo

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()
    

Options

There are certain options which can be passed via data attributes or JavaScript are listed in the following table:

Option NameType/Default ValueData attribute nameDescription
intervalnumber
Default: 5000
data-interval The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pausestring
Default: "hover"
data-pausePauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
wrapboolean
Default: true
data-wrapWhether the carousel should cycle continuously or have hard stops.

Methods

The following are some methods useful to use with carousel code.

MethodDescriptionExample
.carousel(options)Initializes the carousel with an optional options object and starts cycling through items.
$('#identifier').carousel({
  interval: 2000
})
.carousel('cycle')Cycles through the carousel items from left to right.
$('#identifier').carousel('cycle')
.carousel('pause')Stops the carousel from cycling through items.
$('#identifier')..carousel('pause')
.carousel(number)Cycles the carousel to a particular frame (0 based, similar to an array).
$('#identifier').carousel(number)
.carousel('prev')Cycles to the previous item.
$('#identifier').carousel('prev')
.carousel('next')Cycles to the next item..
$('#identifier').carousel('next')

Example

The following example demonstrates the usage of methods:

<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>
      <div class="item">
         <img src="/bootstrap/images/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide3.png" alt="Third slide">
      </div>
   </div>
   <!-- Carousel nav -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
   <!-- Controls buttons -->
   <div style="text-align:center;">
      <input type="button" class="btn start-slide" value="Start">
      <input type="button" class="btn pause-slide" value="Pause">
      <input type="button" class="btn prev-slide" value="Previous Slide">
      <input type="button" class="btn next-slide" value="Next 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">
   </div>
</div> 
<script>
   $(function(){
      // Initializes the carousel
      $(".start-slide").click(function(){
         $("#myCarousel").carousel('cycle');
      });
      // Stops the carousel
      $(".pause-slide").click(function(){
         $("#myCarousel").carousel('pause');
      });
      // Cycles to the previous item
      $(".prev-slide").click(function(){
         $("#myCarousel").carousel('prev');
      });
      // Cycles to the next item
      $(".next-slide").click(function(){
         $("#myCarousel").carousel('next');
      });
      // 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);
      });
   });
</script>
Carousal Plugin Methods Demo

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality which are listed in the following table.

EventDescriptionExample
slide.bs.carouselThis event fires immediately when the slide instance method is invoked..
$('#identifier').on('slide.bs.carousel', function () {
  // do something…
})
slid.bs.carouselThis event is fired when the carousel has completed its slide transition.
$('#identifier').on('slid.bs.carousel', function () {
  // do something…
})

Example

The following example demonstrates the usage of events:

<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>
      <div class="item">
         <img src="/bootstrap/images/slide2.png" alt="Second slide">
      </div>
      <div class="item">
         <img src="/bootstrap/images/slide3.png" alt="Third slide">
      </div>
   </div>
   <!-- Carousel nav -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
</div> 
<script>
   $(function(){
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" 
            +"is invoked.");
      });
   });
</script>
Carousal Plugin Events Demo


Advertisements
Advertisements