Bootstrap Carousel

In this tutorial you will learn how to create carousels with Bootstrap.

Creating Carousels with Bootstrap

The carousel also known as slideshow or image slider is some of the best way of showcasing the huge amount of contents within a small space on the web pages. It is a dynamic presentation of contents where text and images are made visible or accessible to the user by cycling through several items. The following example will show you how to build a simple carousel like image rotator using the Bootstrap 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>   
  •     <!-- Wrapper for 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 controls -->
  •     <a class="carousel-control left" href="#myCarousel" data-slide="prev">
  •         <span class="glyphicon glyphicon-chevron-left"></span>
  •     </a>
  •     <a class="carousel-control right" href="#myCarousel" data-slide="next">
  •         <span class="glyphicon glyphicon-chevron-right"></span>
  •     </a>
  • </div>

— The output of the above example will look something like this:

You can also add captions such as heading or description to the individual slides of the carousel, please check out the next example.


Activate Carousels via Data Attributes

With Bootstrap you can create carousels very easily via data attributes without writing a single line of JavaScript code. Let's go through the following example:

  • <div id="myCarousel" class="carousel slide" data-interval="3000" 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 class="carousel-caption">
  •                 <h3>First slide label</h3>
  •                 <p>Lorem ipsum dolor sit amet...</p>
  •             </div>
  •         </div>
  •         <div class="item">
  •             <img src="images/slide2.png" alt="Second Slide">
  •             <div class="carousel-caption">
  •                 <h3>Second slide label</h3>
  •                 <p>Aliquam sit amet gravida nibh, facilisis...</p>
  •             </div>
  •         </div>
  •         <div class="item">
  •             <img src="images/slide3.png" alt="Third Slide">
  •             <div class="carousel-caption">
  •                 <h3>Third slide label</h3>
  •                 <p>Praesent commodo cursus magna vel...</p>
  •             </div>
  •         </div>
  •     </div>
  •     <!-- Carousel nav -->
  •     <a class="carousel-control left" href="#myCarousel" data-slide="prev">
  •         <span class="glyphicon glyphicon-chevron-left"></span>
  •     </a>
  •     <a class="carousel-control right" href="#myCarousel" data-slide="next">
  •         <span class="glyphicon glyphicon-chevron-right"></span>
  •     </a>
  • </div>

You might be wondering what this code was all about. Ok, let's go through each part of this carousel code one by one for a better understanding.

Explanation of Code

The Bootstrap carousel has basically three components — carousel indicators (small circles), carousel controls (previous and next arrows) and the carousel items or slides.

  • The outermost container of every carousel requires a unique id (in our case id="myCarousel") so that it can be targeted by the carousel indicators (line no-4,5,6) and carousel controls (line no-33,36) to function properly.
  • The data-ride="carousel" attribute of the .carousel element tells the Bootstrap to start animating the carousel immediately when the page load. Whereas the data-interval attribute specifies the time delay between two slides.
  • The .data-slide-to attribute (line no-4,5,6) move the slide position to a particular item (index beginning with 0) when clicking on the specific carousel indicator.
  • The slides are specified within the .carousel-inner (line no-9) and the content of each slide is defined within the .item element that can be text and images.
  • The data-slide attribute on carousel controls (line no-33,36) accepts the keywords prev or next, which alters the slide position relative to its current position.

Rest of the thing is self explanatory, such as the .carousel element specifies the Bootstrap carousel, the .carousel-indicators element indicates how many slides are there in the carousel and which slide is currently active, the .carousel-caption element used within the .item element defines the caption for that slide etc.

 

Tip:It is required to add the class .active to one of the slides (i.e. on the .item element). Otherwise, the carousel will not be visible.

 

Note:The .slide class adds CSS slide transition animation to the carousel that makes the items slide when showing the new item. But it doesn't work in Internet Explorer 8 & 9 due to lack of support of the necessary CSS3 properties.


Activate Carousels via JavaScript

You may also activate a carousel manually using the JavaScript — just call the carousel() method with the id or class selector of the wrapper element in your JavaScript code.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •      $("#myCarousel").carousel();
  • });
  • </script>

Options

There are certain options which may be passed to carousel() Bootstrap method to customize the functionality of a carousel widget.

Name Type Default Value Description
interval number 5000 Specifies the amount of time to delay (in milliseconds) between one slide to another in automatic cycling. If false, carousel will not automatically cycle.
pause string "hover" Pauses the cycling of the carousel on mouse enter and resumes the cycling of the carousel on mouse leave.
wrap boolean true Specifies whether the carousel should cycle continuously or have hard stops.
keyboard boolean true Specifies whether the carousel should react to keyboard events.

Check out the following example to see these options works:

  • <script type="text/javascript">
  • $(document).ready(function(){
  •      $("#myCarousel").carousel({
  •          interval : 3000,
  •          pause: false
  •      });
  • });
  • </script>

You can also set these options using the data attributes on carousel — just append the option name to data-, like data-interval="3000", data-pause="hover" as demonstrated in the section of data attribute implementation.


Disable Auto Sliding in Bootstrap Carousel

By default Bootstrap carousel is started playing or sliding automatically when the page loads. However, you can turn off this auto sliding by simply setting the carousel interval option to false via JavaScript. You can also set this option using the data attribute like data-interval="false" on the .carousel element.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •      $("#myCarousel").carousel({
  •          interval : false
  •      });
  • });
  • </script>

Methods

These are the standard bootstrap's carousels methods:

.carousel(options)

This method initializes the carousel with optional options and starts cycling through items.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •      $("#myCarousel").carousel({
  •          interval : 3000
  •      });
  • });
  • </script>

.carousel('cycle')

This method start carousel for cycling through the items from left to right.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".start-slide").click(function(){
  •         $("#myCarousel").carousel('cycle');
  •     });
  • });
  • </script>

.carousel('pause')

This method stops the carousel from cycling through items.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".pause-slide").click(function(){
  •         $("#myCarousel").carousel('pause');
  •     });
  • });
  • </script>

.carousel(number)

This method cycles the carousel to a particular frame (start with 0, similar to an array).

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".slide-three").click(function(){
  •         $("#myCarousel").carousel(3);
  •     });
  • });
  • </script>

.carousel('prev')

This method cycles the carousel to the previous item.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".prev-slide").click(function(){
  •         $("#myCarousel").carousel('prev');
  •     });
  • });
  • </script>

.carousel('next')

This method cycles the carousel to the next item.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".next-slide").click(function(){
  •         $("#myCarousel").carousel('next');
  •     });
  • });
  • </script>

Events

Bootstrap's carousel class includes few events for hooking into carousel functionality.

Event Description
slide.bs.carousel This event fires immediately when the slide instance method is called.
slid.bs.carousel This event is fired when the carousel has completed its slide transition.

The following example displays an alert message to the user when sliding transition of a carousel item has been fully completed.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $('#myCarousel').on('slid.bs.carousel', function () {
  •         alert("The sliding transition of previous carousel item has been fully completed.");
  •     }); 
  • });
  • </script>
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.