Bootstrap Carousel Plugin

Bootstrap is offering a remarkable feature of carousel and easy to embed in website. This Bootstrap Carousel Plugin is flexible and responsive and allows images, videos and any kind of content which you want to use within the carousel area.

If you want to implement functionality of this plugin individually, simple include the carousel.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.

Example

Here is a simple slideshow below shows a generic component for cycling through elements like a carousel. To use the carousel you simple need a markup code. This is only class based development you do not need for data attributes for carousel plugin.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- 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="images/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="images/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="images/slide3.png" alt="Third slide">
 </div>
 </div>
 <!-- Carousel nav -->
 <a class="carousel-control left" href="#myCarousel" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left">&lsaquo;</span>
	</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right">&rsaquo;</span>
	</a>
</div> 

Demo

Optional Captions

If you want to like 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. Use the following code to display caption in the slideshow:

<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="images/slide1.png" alt="First slide">
 <div class="carousel-caption">
			<h3>First slide label</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		 </div>
 </div>
 <div class="item">
 <img src="images/slide2.png" alt="Second slide">
 <div class="carousel-caption">This Caption 2</div>
 </div>
 <div class="item">
 <img src="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> 

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.

  
  


• 
  

  Alternatively 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 can be passed via data attributes or JavaScript are listed below. For data attributes, append the option name to data-, as in data-interval="".

Option Name	Type	Default	Data attribute name	Description
interval	number	5000	data-interval	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	string	"hover"	data-pause	Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
wrap	boolean	true	data-wrap	Whether the carousel should cycle continuously or have hard stops.

Methods

Here are some useful methods to use carousel code.

Method	Description
.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

This example shows the usage of above listed 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="images/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="images/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="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>

Demo

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality which are listed below.

Both events have the following additional properties:

• direction: The direction in which the carousel is sliding (either "left" or "right").


• relatedTarget: The DOM element that is being slid into place as the active item.

Event	Description
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… )

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="images/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="images/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="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>

Demo

Bootstrap Carousel Plugin