The Bootstrap carousel is a component for sliding through elements. It is a flexible, responsive and attractive way for adding a slider in our website.

It is a dynamic presentation of contents where text and images are made visible or accessible to the user by sliding through several items.

Bootstrap carousel are not supported properly in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve the slider effect).

Take a look at our bootstrap responsive templates which will provide you the better solution for your problems.



Bootstrap Carousel In Normal Form


<!-- this is simple example of bootstrap carousel-->
<html>
<head>
<title>Bootstrap carousel</title>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- this is 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>
<!--this is Wrapper for carousel items which are divided into three parts -->
<div class="carousel-inner">
<!-- this is first part-->
<div class="item active">
<h2>Slide 1</h2>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet consectetur…</p>
</div>
</div>
<!-- this is second part-->
<div class="item">
<h2>Slide 2</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida…</p>
</div>
</div>
<!-- this is third part-->
<div class="item">
<h2>Slide 3</h2>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna vel…</p>
</div>
</div>
</div>
<!-- this is 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>
</body>
</html>

The output of the above example

bootstrap carousel


Bootstrap Carousel With Javascript And Jquery Library Files


<!-- this is simple example of bootstrap carousel-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Carousel</title>
<!-- these are library file of css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- this is library file of Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--this is library file of javascript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- this css used for body-->
<style type="text/css">
h2{
margin: 0;
color: #666;
padding-top: 90px;
font-size: 52px;
font-family: "trebuchet ms", sans-serif;
}
.item{
background: #333;
text-align: center;
height: 300px !important;
}
.carousel{
margin-top: 20px;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<!--this DIV use for carousel and sliding time-->
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- this DIV use for carousel indicators for slider-->
<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 which are show in output form-->
<div class="carousel-inner">
<!--this is first slider page-->
<div class="active item">
<h2>Slide 1</h2>
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- this is second slider page-->
<div class="item">
<h2>Slide 2</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
</div>
</div>
<!-- this is third slider page-->
<div class="item">
<h2>Slide 3</h2>
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- this is carousel controls for used of next and previous pages slider-->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

Bootstrap Carousel Through JavaScript

You may also activate carousel manually using javascript- just call the carousel() method. You should copy-paste the basic Bootstrap template and add javascript and jquery library files.


//this code use for starting javascript
<script type="text/javascript">
$(document).ready(function(){
// start carousel for java script
$("#myCarousel").carousel();
// Enable carousel control for previous pages
$(".left").click(function(){
$("#myCarousel").carousel('prev');
});
// Enable carousel control for next pages
$(".right").click(function(){
$("#myCarousel").carousel('next');
});
// Enable carousel indicators as like pages which these are start
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>

How We Can Find Sliding Time


// For check sliding time through javascript
<script type="text/javascript">
$(document).ready(function(){
$("#myCarousel").carousel({
interval : 1000,//sliding time
pause: false
});
});
</script>

Disable Auto Slider In Bootstrap Carousel

When page loads bootstrap carousel starts sliding automatically. However, you can close this auto sliding by simply setting the carousel ‘interval’ option to ‘false’ through javascript.


// For automatic disable slider through javascript
<script type="text/javascript">
$(document).ready(function(){
$("#myCarousel").carousel({
// sliding time for automatic sliding page
interval : 1000,
// this is option for automatic sliding page
pause: false
});
});
</script>

Methods in Bootstrap Carousel

  • carousel(options)

This method initialize optional options in bootstrap carousel and starts cycling through javascript.


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

  • carousel(‘cycle’)

This method is used to start carousel cycle through the javascript from left to right.


// Goes through the carousel items from left to right
<script type="text/javascript">
$(document).ready(function(){
// define condition here
$("#.start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
});
</script>

  • carousel(‘pause’)

This method is used to stop the carousel cycle through the javascript.


// Stops the carousel from going through items
<script type="text/javascript">
$(document).ready(function(){
$("#.pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
});
</script>

  • carousel(number)

This method is used to set the carousel to particular frame(start with 0).


// Goes to a specified item (zero-based: first item is 0, second item is 1, etc..)
<script type="text/javascript">
$(document).ready(function(){
$("#.slide-three").click(function(){
$("#myCarousel").carousel('3');
});
});
</script>

  • carousel(‘prev’)

This method is used for carousel to slide previously.


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

  • carousel(‘next’)

This method is used for carousel to slide next.


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

Events

Bootstrap carousel class includes some events for hooking into carousel functionality. The events is basically of two types.

  • slide.bs.carousel:- It is use when the carousel is about to slide from one item to another.

// here generate alert if you give permission then move to next slide
<script type="text/javascript">
$(document).ready(function(){
$("#myCarousel").on('slide.bs.carousel',function(){
alert("A new slide is about to be shown!");
});
});
</script

  • slid.bs.carousel:- It is use when the carousel has finished sliding from one item to another.

// here generate alert for move previous slider
<script type="text/javascript">
$(document).ready(function(){
$("#myCarousel").on('slid.bs.carousel',function(){
alert("The carousel has finished sliding from one item to another!");
});
});
</script

Conclusion

In this tutorial we have learned about, how we can make Bootstrap Carousel. Hope you understood the concept. Keep following us for more coding tricks.

For more related information check out the following blogs –