OpenSourceVarsity

pdf icons

Bootstrap Carousel Tutorial

The Bootstrap carousel is a flexible, responsive way to add a slider to your site. Bootstrap carousel can be used in to show case images, display testimonials, display videos, special messages to site visitors or any content that you believe is important to display to your site visitors in one place.

A Carousel empowers you to display a lot of information to a site visitor in a controlled manner within the same screen real estate.

NOTE: To include this plugins functionality, you will need carousel.js. If you are using bootstrap.js OR bootstrap.min.js this plugins JavaScript is included.

NOTE: Nested carousels are not supported.

NOTE: The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

Usage

  1. Via data attributes: Use data attributes to control the position of the carouse easily.
    • 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 an animation starting at page load.
  2. Via JavaScript: The carousel can be manually called with JavaScript as below:

$(‘.carousel’).carousel()

Example of a simple Image Carousel:

To implement the carousel, you just need to add the code as shown in codespec 1 to your webpage at an appropriate place.

<!-- #divCarousel STARTS  -->
<div  id="divCarousel" class="carousel slide"  data-ride="carousel">
 
	<!-- .carousel-indicators STARTS -->
    <ol  class="carousel-indicators">
<li  data-target="#divCarousel" data-slide-to="0"  class="active"></li>
 <li  data-target="#divCarousel" data-slide-to="1"></li>
        <li  data-target="#divCarousel" data-slide-to="2"></li>
<li  data-target="#divCarousel" data-slide-to="3"></li>
    </ol>
    <!-- .carousel-indicators ENDS -->

    <!-- .carousel-inner  Wrapper for slides - STARTS -->
    <div class="carousel-inner"  role="listbox">

<div class="item  active">
 <img  src="images/slider/1.jpg" alt="">
 </div>
 <!-- 1st carousel ENDS -->
 
 <div class="item">
 <img  src="images/slider/2.jpg" alt="">
 </div>
 <!-- 2nd carousel ENDS -->
 
 <div class="item">
 <img  src="images/slider/3.jpg" alt="">
 </div>
 <!-- 3rd carousel ENDS -->
 
 <div class="item">
 <img  src="images/slider/4.jpg" alt="">
 </div>
 <!-- 4th carousel ENDS -->

 </div>
 <!-- .carousel-inner Wrapper for slides  - ENDS -->
 
    <!-- Controls STARTS -->
 <a class="left carousel-control"  href="#divCarousel" role="button" data-slide="prev">
 <span class="glyphicon  glyphicon-chevron-left" aria-hidden="true"></span>
 <span  class="sr-only">Previous</span>
    </a>
 <a class="right  carousel-control" href="#divCarousel" role="button"  data-slide="next">
 <span class="glyphicon  glyphicon-chevron-right" aria-hidden="true"></span>
 <span  class="sr-only">Next</span>
    </a>
 <!-- Controls ENDS -->
 
</div>
<!-- #divCarousel ENDS  -->

Codespec 1

Click to download all carousel examples

The output of the above code is as shown in diagram 1.

Bootstrap Slider Examples Diagram 1

Example of an Image Carousel With Caption:

To add the caption with the Bootstrap Carousel, you just need to add the code as shown in codespec 2.

<!--  #divCarousel2 STARTS -->

    <div  id="divCarousel2" class="carousel slide"  data-ride="carousel">
    <!-- .carousel-indicators STARTS -->
    <ol  class="carousel-indicators">
 <li  data-target="#divCarousel2" data-slide-to="0"  class="active"></li>
 <li  data-target="#divCarousel2"  data-slide-to="1"></li>
 <li  data-target="#divCarousel2"  data-slide-to="2"></li>
 <li  data-target="#divCarousel2"  data-slide-to="3"></li>
    </ol>
 <!-- .carousel-indicators ENDS -->
    
 <!-- .carousel-inner Wrapper for slides  - STARTS -->
 <div class="carousel-inner"  role="listbox">
 
 <div class="item  active">
 <img  src="images/slider/1.jpg" alt="">
 <div  class="carousel-caption">
 Caption for slider 1
 </div>
 </div>
 <!-- 1st carousel ENDS -->

 <div class="item">
 <img  src="images/slider/2.jpg" alt="">
 <div  class="carousel-caption">
 Caption for slider 2
 </div>
 </div>
 <!-- 2nd carousel ENDS -->

 <div class="item">
 <img  src="images/slider/3.jpg" alt="">
 <div  class="carousel-caption">
 Caption for slider 3
 </div>
 </div>
 <!-- 3rd carousel ENDS -->
 
 <div class="item">
 <img  src="images/slider/4.jpg" alt="">
 <div  class="carousel-caption">
 Caption for slider 4
 </div>
 </div>
 <!-- 4th carousel ENDS -->

 </div>
    <!-- .carousel-inner Wrapper for slides  - ENDS -->
 
 <!-- Controls STARTS -->
 <a class="left  carousel-control" href="#divCarousel2" role="button"  data-slide="prev">
 <span class="glyphicon  glyphicon-chevron-left" aria-hidden="true"></span>
 <span  class="sr-only">Previous</span>
 </a>
 <a class="right  carousel-control" href="#divCarousel2" role="button"  data-slide="next">
 <span class="glyphicon  glyphicon-chevron-right" aria-hidden="true"></span>
 <span  class="sr-only">Next</span>
    </a>
    <!-- Controls ENDS -->

</div>
<!--  #divCarousel2 ENDS -->

Codespec 2

Click to download all carousel examples

The output of the above code is as shown in diagram 2.

Bootstrap Slider Examples Diagram 2

Carousel Options

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 “hover” Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
wrap boolean true Whether the carousel should cycle continuously or have hard stops.
keyboard boolean true Whether the carousel should react to keyboard events.

Carousel Methods

Method Description Example:
.carousel(options) Initializes the carousel with an optional options object and starts cycling through items. $(‘#parent_id_of_carousel’).carousel({ interval: 4000 })
.carousel(‘cycle’) Cycles through the carousel items from left to right. $(‘#parent_id_of_carousel’).carousel(‘cycle’)
.carousel(‘pause’) Stops the carousel from cycling through items. $(‘#parent_id_of_carousel).carousel(‘pause’)
.carousel(number) Cycles the carousel to a particular frame (0 based, similar to an array). $(‘#parent_id_of_carousel).carousel(number)
.carousel(‘prev’) Cycles to the previous item. $(‘#parent_id_of_carousel).carousel(‘prev’)
.carousel(‘next’) Cycles to the next item. $(‘#parent_id_of_carousel).carousel(‘next’)

Example of an Image Carousel With Method:

To usage of the method with Bootstrap Carousel, you just need to add the code as shown in codespec 3.

<!-- #myCarousel3 STARTS  -->
<div  id="myCarousel3" class="carousel slide">

 <!-- Carousel indicators -->
 <ol  class="carousel-indicators">
 <li  data-target="#myCarousel3" data-slide-to="0"  class="active"></li>
<li  data-target="#myCarousel3" data-slide-to="1"></li>
<li data-target="#myCarousel3"  data-slide-to="2"></li>
    </ol> 

<!-- Carousel items - STARTS -->
    <div  class="carousel-inner">

<div class="item  active">
<img  src="images/slider/2.jpg" alt="">
</div>
<div class="item">
<img  src="images/slider/3.jpg" alt="">
</div>
<div  class="item">
<img  src="images/slider/4.jpg" alt="">
</div>

</div>
<!-- Carousel items - ENDS -->

    <!-- Controls STARTS -->
<a class="left  carousel-control" href="#divCarousel2" role="button"  data-slide="prev">
    	<span class="glyphicon  glyphicon-chevron-left" aria-hidden="true"></span>
<span  class="sr-only">Previous</span>
 </a>
<a class="right carousel-control" href="#divCarousel2" role="button"  data-slide="next">
 <span class="glyphicon  glyphicon-chevron-right" aria-hidden="true"></span>
<span  class="sr-only">Next</span>
</a>
 <!-- Controls ENDS -->

<div class="carouselBtn">
<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> 
<!-- #myCarousel3 STARTS -->


<script  type="text/j-avascript">
$(function(){
// Initializes the carousel
$(".start-slide").click(function(){
$("#myCarousel3").carousel('cycle');
});

// Stops the carousel
$(".pause-slide").click(function(){
$("#myCarousel3").carousel('pause');
});

// Cycles to the previous item
$(".prev-slide").click(function(){
$("#myCarousel3").carousel('prev');
});
 
// Cycles to the next item
$(".next-slide").click(function(){
$("#myCarousel3").carousel('next');
});
 
// Cycles the carousel to a particular frame 
    $(".slide-one").click(function(){
$("#myCarousel3").carousel(0);
});

 $(".slide-two").click(function(){
$("#myCarousel3").carousel(1);
});

$(".slide-three").click(function(){
$("#myCarousel3").carousel(2);
 });
});
</script>

Codespec 3

Click to download all carousel examples

The output of the above code is as shown in diagram 3.

Bootstrap Slider Examples Diagram 3

Using the default bootstrap carousel, we created a testimonial carousel example as shown in diagram 4.

Bootstrap Slider Examples Diagram 4

Click to download all carousel examples

We have also provided you with an additional slider name Nivo slider as shown in diagram 5 and diagram 6.

Bootstrap Slider Examples Diagram 5

Bootstrap Slider Examples Diagram 6

Click to download all carousel examples

If you are a competent HTML5 / CSS3 / -JavaScript programmer we are sure you will be able to change the code of the web page modal window we’ve written to make the code snappier and perhaps a tad shorter.

Feel free to do so. If you would like to share your code with others via OpenSourceVarsity please drop us an Email and we’d be happy to put up your code spec for download via our website.

Should you have any queries about the carousel examples code do post these in the Bootstrap 3 section of the OpenSourceVarsity forum.

We really do make special efforts to help, having said that, we really cannot re-write/edit code blocks for you.

Click to download all carousel examples

 

October 24, 2016
Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved
X