In bootstrap, the carousel component is useful to create a slideshow by cycling through a series of elements such as images, slides of text, or custom markup.
Using the Bootstrap carousel component, we can create slideshows with previous/next controls and indicators based on our requirements.
To create a carousel in bootstrap, we need to use the following classes to define the slides, previous/next controls, and indicators for the carousel.
| Class | Description |
|---|---|
| carousel | This class is useful for creating a carousel. |
| slide | This class is useful to add CSS transition and animation effects to the slides while switching from one slide to another. |
| carousel-indicators | This class is useful to add indicators to the carousel. |
| carousel-inner | This class is useful to add slides to the carousel. |
| carousel-item | This class is useful to specify the slides for the carousel. |
| carousel-control-prev | This class is useful to add the previous button to the carousel to allow users to go back between the slides. |
| carousel-control-prev-icon | This class is useful to add a previous (left) icon to the carousel. |
| carousel-control-next | This class is useful to add the next button to the carousel to allow users to go forward between the slides. |
| carousel-control-next-icon | This class is useful to add the next (right) icon to the carousel. |
Following is the example of creating the carousel with previous/next controls and indicators in bootstrap.
If you observe the above example, we created a carousel with slides, previous/next controls, and indicators by specifying the required classes. Here, adding previous/next controls and indicators to the carousel is optional. The carousel will not control the slide dimensions, so you need to add your custom styles to make the slides in the appropriate size.
The above example will return the result as shown below.
In the bootstrap carousel, you can add captions to each slide by adding .carousel-caption element within any .carousel-item element as shown below.
The above example will return the result as shown below.
In case if you want your carousel to animate the slides with fade transition instead of slide, you need to add .carousel-fade class to your carousel as shown below.
In bootstrap, by using carousel() method you can enable the carousel for particular element with id or class using JavaScript like as shown below.
In bootstrap, you can pass different options to carousel() method to customize the carousel based on your requirements.
Following are the few important options which we can pass to carousel() method in bootstrap.
| Name | Type | Default | Description |
|---|---|---|---|
| interval | number | 5000 | It is useful to specify the time delay between slides. |
| keyboard | boolean | true | It is useful to specify whether the carousel should react to keyboard events or not. |
| pause | string | boolean | "hover" | It is useful to pause the carousel from going through the next slide on mouseenter and resumes the sliding on mouseleave. If we set pause to false, the carousel won't pause on hover. |
| ride | string | false | It is useful to autoplay the carousel on load or after the user manually slides the carousel's first item. |
| wrap | boolean | true | It is useful to specify whether the carousel should continuously go through all the slides or stop at the last slide. |
| touch | boolean | true | It is useful to specify whether the carousel should support left/right swipe interactions on touchscreen devices. |
The above carousel options can set either through the data attributes or JavaScript. Following is the example of passing the options through JavaScript to the carousel() method.
If you observe the above code, we are passing multiple options to carousel() method by using JavaScript.
Same like above carousel options, we have different carousel() methods to perform operations like slide, stop, pause, etc., on carousel slides based on our requirements.
| Method | Description |
|---|---|
| .carousel(options) | It is useful to attach carousel options. |
| .carousel('cycle') | It is useful to cycle through the carousel items from left to right. |
| .carousel('pause') | It is useful to stop the carousel from cycling through items. |
| .carousel(number) | It is useful to cycle the carousel to a particular slide (0: first item, 1: second item, etc.) |
| .carousel('prev') | It is useful to go back to the previous item. |
| .carousel('next') | It is useful to navigate to the next item. |
| .carousel('dispose') | It is useful to destroy a carousel. |
Following is the example of using carousel() methods to perform operations like slide, stop, pause, etc., on carousel slides in bootstrap.
In bootstrap, the carousel classes have few events for hooking into carousel functionality to fire the events while sliding the carousel items.
| Event | Description |
|---|---|
| slide.bs.carousel | This event will fire immediately when the slide instance method is invoked. |
| slid.bs.carousel | This event will fire when the carousel completed its slide transition. |
Following is the example of using the events to show the alert message while sliding the carousel items in bootstrap.
This is how we can use the bootstrap carousel in our applications to create the slideshows based on our requirements.