Bootstrap Carousel Plugin

The carousel plugins are used to slideshow the elements. We can add images, videos, etc. The content is flexible and responsive.

The carousel plugin can be added into bootstrap individually by including the carousel.js files. The carousel plugin is dependent on the transition plugin. Carousel plugin can also be added all at once when we use bootstrap.js files.

Example:

Consider the following example in which bootstrap carousel plugin is used to cycle through the elements. It should be noted here that for a carousel we do not need any data attributes rather class based development will be required:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< div id = “Carousel1” class = “carousel slide” >

< ol class = “carousel- indicators” >

< li data- target = “#Carousel1” data- slide- to = “0” class = “active” ></ li >

< li data- target = “#Carousel1” data- slide- to = “1” ></ li >

< li data- target = “#Carousel1” data- slide- to = “2” ></ li >

< /ol >

< div class = “carousel- inner” >

< div class = “item active” >

< img src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6″ alt = “Slide 1” style = “width: 500px; height: 200px;” >

</ div >

< div class = “item” >

< img src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 2” style = “width: 500px; height: 200px;” >

</ div >

< div class = “item” >

< img src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 3″ style=”width: 500px; height: 200px;” >

</ div >

</ div >

< a class = “carousel- control left” href = “#Carousel1” data- slide = “prev” >&lsaquo; </ a >

< a class = “carousel- control right” href = “#Carousel1” data- slide = “next” >&rsaquo; </ a >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

CODE

Optional Captions:

Captions can be added to sides by using .item class with .carousel-caption element. You can add HTML within this and it will be formatted and aligned accordingly.

Consider the following example in which we have added captions to slides:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min.  js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< div id = “Carousel1” class = “carousel slide” >

< ol class = “carousel- indicators” >

< li data- target = “#Carousel1” data- slide- to = “0” class = “active” ></ li >

< li data- target = “#Carousel1” data- slide- to = “1” ></ li >

< li data- target = “#Carousel1” data- slide- to = “2” ></ li >

</ ol >

< div class = “carousel- inner” >

< div class = “item active” >

< img src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 3″ style=”width: 500px; height: 200px;” >

< div class = “carousel- caption” > Caption No 1 </ div >

</ div >

< div class = “item” >

< img src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 3” style = “width: 500px; height: 200px;” >

< div class = “carousel- caption” > Caption No 2 </ div >

</ div >

< div class = “item” >

< img src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 3” style = “width: 500px; height: 200px;” >

< div class = “carousel- caption” > Caption No 3 </ div >

</ div >

</ div >

< a class = “carousel- control left” href = “#Carousel1” data- slide = “prev” >&lsaquo; </ a >

< a class = “carousel- control right” href = “#Carousel1” data- slide = “next” >&rsaquo; </ a > +

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

following result

Usage:

Carousel plugin can be added by using one of the following ways:

By using data attributes:

To control carousel, we use data attributes, for example the data attribute data-slide is used to change the position of the slides from the current position. It can have values either “prev” or “next”.

Another data attribute that is data-slide-to is used to pass the index of the empty slide to carousel. For example data-slide-to = “1” will change the position of the slide to specific index. It should be noted here that the index starts from 0. The data attribute data-ride = “carousel” marks the carousel as animation when the page is loaded.

By using JavaScript:

Use the following statement of JavaScript to add carousel in your page:

$(‘.carousel’).carousel()

Options:

There are a number of options for carousel that are described in the following table:

Option Type Default Value Data attribute Description
Interval Number Default: 5000 Data- interval This option is used to specify the delay when each slide changed in milliseconds.
Pause String Default: “hover” Data-pause This option is used to pause the carousel from going to other slide when the mouse enters into carousel. The carousel resumes when the muse leaves the carousel.
Wrap Boolean Default: true data- wrap This option is used to decide if the carousel will stop or will continue at the last slide.

Methods:

Consider the following table in which the methods of carousel are described:

Method Description Basic Syntax
.carousel(options) This method is used to initialize the carousel with option. $(‘#identifier’).carousel({

interval: 2000

})

 

.carousel(‘cycle’) This method is used to make the carousel to cycle through the items from left side to the right side. $(‘#identifier’).carousel(‘cycle’)

 

.carousel(‘pause’) This method makes the carousel to not to cycle through items. $(‘#identifier’).carousel(‘pause’)

 

.carousel(number) This method is used to make carousel cycle through items according to index number of items. (index starts from 0) $(‘#identifier’).carousel(number)

 

.carousel(‘prev’) This method is used to go to the previous item. $(‘#identifier’).carousel(‘prev’)

 

.carousel(‘next’) This method is used to go to the next item. $(‘#identifier’).carousel(‘next’)

 

Example:

Consider the following example in which the methods of carousel are used:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min.  js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< div id = “Carousel1” class = “carousel slide” >

< ol class = “carousel- indicators” >

< li data- target = “#Carousel1” data- slide- to = “0” class = “active” ></ li >

< li data- target = “#Carousel1” data- slide- to = “1” ></ li >

< li data- target = “#Carousel1” data- slide- to = “2” ></ li >

</ ol >

< div class = “carousel- inner” >

< div class = “item active” >

< img style = “width: 500px; height: 200px;” src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 1” >

</ div >

< div class = “item” >

< img style = “width: 500px; height: 200px;” src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 2” >

</ div >

< div class = “item” >

< img style = “width: 500px; height: 200px;” src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 3” >

</ div >

</ div >

< a class = “carousel- control left” href = “#Carousel1” data- slide = “prev” >&lsaquo; </ a >

< a class = “carousel- control right” href = “#Carousel1” data- slide = “next” >&rsaquo; </ a >

< div style = “text- align: center;” >

< 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 No 1” >

< input type = “button” class = “btn slide- two” value = “Slide No 2” >

< input type = “button” class = “btn slide- three” value = “Slide No 3” >

</ div >

</ div >

< script >

$(function () {

$ (“.prev- slide”).click (function () {

$ (“#Carousel1”). carousel (‘prev’);

} );

$ (“.next- slide”). click (function () {

$ (“#Carousel1”). carousel (‘next’);

} );

$ (“.slide- one”).click (function () {

$ (“#Carousel1”). carousel (0);

} );

$ (“.slide- two”).click (function () {

$ (“#Carousel1”). carousel (1);

});

$ (“.slide-three”). click (function () {

$ (“#Carousel1”).carousel (2);

} );

} );

</ script >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

OUTPUT

Events:

Consider the following example in which events of carousel are described:

Event Description Basic Syntax
slide.bs.carousel This event is occurred when slide method is called. $(‘#identifier’).on(‘slide.bs.carousel’, function () {

Body

})

 

slid.bs.carousel This event is occurred when the transition of carousel is completed. $(‘#identifier’).on(‘slid.bs.carousel’, function () {

Body

})

 

Example:

Consider the following example which demonstrates events of carousel:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<div id = “Carousel1” class = “carousel slide”>

<ol class = “carousel-indicators”>

<li data-target = “#Carousel1” data-slide-to = “0” class = “active”></li>

<li data-target = “#Carousel1” data-slide-to = “1”></li>

<li data-target = “#Carousel1” data-slide-to = “2”></li>

</ol>

<div class = “carousel-inner”>

<div class = “item active”>

<img style=”width:500px;height:200px;” src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 1”>

</div>

<div class = “item”>

<img style=”width:500px;height:200px;” src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 2”>

</div>

<div class = “item”>

< img style=”width:500px;height:200px;” src = “http://www.essentialdesigns.net/wp-content/uploads/2015/07/twitter-bootstrap-300×168.jpg?8473d6” alt = “Slide 3”>

</div>

</div>

<a class = “carousel-control left” href = “#Carousel1” data-slide = “prev”>&lsaquo;</a>

<a class = “carousel-control right” href = “#Carousel1” data-slide = “next”>&rsaquo;</a>

</div>

<script>

$(function() {

$(‘#Carousel1’).on(‘slide.bs.carousel’, function () {

alert(“This event is occurred when slide method is called.”);

});

});

</script>

</body>

</html>

The above code will generate the following result:

OUTPUT:

bootstrap

In the above code we used the slide method of carousel. Event slide.bs.carousel will occur when the carousel will slide through which will generate an alert message. Consider the following image:

ok