A Brief About Bootstrap Carousel

A Brief About Bootstrap Carousel

The carousel.js is a plug-in in the Bootstrap Framework for sliding images like a carousel in your web pages, especially landing or home page. This is quite common these days and very effective way of the marketing to present the core products or services or special offers related to the website in a slideshow just below the top navigation bar.

The Twitter Bootstrap Carousel plugin not only allows to give the slideshow of images like carousel but also you can include headings or captions for sliding images.

Note: If you intend to use just carousel by using the Bootstrap framework then you should include carousel.js file to your web page. Otherwise, you can include the whole library or JavaScript i.e. bootstrap.js or the minified bootstrap.min.js. For our examples below, we will include Bootstrap framework from CDN as a minified file.

An example of creating a slideshow with Bootstrap carousel

Following example creates a slideshow of three images that are related to our tutorials website. You can use the “carousel” class in the main div for carousel with the “slide” class. If you do not use the “slide” class the image transition will be like a sudden effect. See both examples below:

Bootstrap carousel slideshow

Example of carousel class with slide class

Experience this online

The example of carousel class without slide class

Same example as above but without slide class in the main carousel div with id= carousel-example-generic.

Experience this online

As you can see in the second example, the images in the slideshow are changing in jerk or sudden way. Also, we used the carousel-control class with the left and right option, that adds controls to move images by clicking left or right arrows. See the control section in the example.

Note: As such Bootstrap uses CSS3 for animations so these are not compatible with IE 8 or 9. You should use this only if you are not targeting IE 8 and 9 visitors.

Adding captions to carousel Bootstrap example

You can add descriptions and links to slideshow images by using “carousel-caption” class under the images. We are adding headings by using <h1> tag and <p> tag below with a button. See the example by clicking the link below:

Bootstrap carousel captions

Experience this online

Setting interval for slideshow example

Following example shows how to set the interval for slideshow images in the carousel. We will set the interval in JavaScript/jQuery as the web page loads. The default value is 5000 milliseconds. We set 2000 millisecond value for this example.

Experience this online

Start, pause, next, previous controls in carousel example

Following example shows different methods of the carousel. A few buttons are added at the bottom of sliding images that you can press to see moving to Next slide, previous slide, Start, pause and slide number.

Bootstrap carousel

Experience this online

Useful: Bootstrap Tutorial | Bootstrap Table