Bootstrap Carousel
In this tutorial you will learn how to create carousels with Bootstrap.
Creating Carousels with Bootstrap
The carousel also known as slideshow or image slider is some of the best way of showcasing the huge amount of contents within a small space on the web pages. It is a dynamic presentation of contents where text and images are made visible or accessible to the user by cycling through several items.
The following example will show you how to build a simple carousel or slideshow with previous/next controls and indicators using the Bootstrap carousel plugin.
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
— The output of the above example will look something like this:
Creating Carousel with Captions
You can also add captions to carousel slides easily with the .carousel-caption
element within any .carousel-item
. You can optionally use display utility classes to hide captions on smaller viewports.
Let's try out the following example to understand how it basically works:
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some placeholder content for the third slide.</p>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
— The output of the above example will look something like this:
Tip: The classes .d-none
and .d-md-block
on the .carousel-caption
elements in the example above makes the carousel captions visible on the medium devices (i.e. viewport width ≥768px), but hide them on the smaller viewports.
Creating Dark Variant of Carousel
You can additionally add .carousel-dark
to the .carousel
to create darker controls, indicators, and captions in case your slides are lighter in color. Let's check out an example:
<div id="myCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slide1-light.png" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="images/slide2-light.png" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="images/slide3-light.png" class="d-block w-100" alt="Slide 3">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
— The output of the above example will look something like this:
Check out the snippets section for examples of some beautifully designed Bootstrap carousels.
You can also add captions such as heading or description text to the individual slides of the carousel, please check out the next example in the following section.
Activate Carousels via Data Attributes
With Bootstrap you can create carousels very easily via data attributes without writing a single line of JavaScript code. Let's take a look at the following example:
Example
Try this code »<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
You might be wondering what this code was all about. Well, let's go through each part of this carousel example code one by one for a better understanding.
Explanation of Code
The Bootstrap carousel generally has three components — carousel indicators (small rectangles), carousel controls (previous and next arrows) and the carousel items or slides.
- The outermost container of every carousel (i.e. the
.carousel
element) requires a uniqueid
(in our caseid="myCarousel"
) so that it can be targeted by the carousel indicators (line no-4,5,6) and carousel controls (line no-23,26) to function properly. - The
data-bs-ride="carousel"
attribute of the.carousel
element tells the Bootstrap to start animating the carousel immediately when the page load. - The
data-bs-slide-to
attribute (line no-4,5,6) move the slide position to a particular item (index beginning with 0) when clicking on the specific carousel indicator. - The slides are specified within the
.carousel-inner
(line no-10) and the content of each slide is defined within the.carousel-item
element that can be text and images. - The
data-bs-slide
attribute on carousel controls (line no-23,26) accepts the keywordsprev
ornext
, which alters the slide position relative to its current position.
Rest of the thing is self-explanatory, for example, the .carousel
element specifies the Bootstrap carousel, the .carousel-indicators
element indicates how many slides are there in the carousel and which slide is currently active, .carousel-control-prev
, .carousel-control-next
elements defines previous and next controls to move between carousel slides, and so on.
Tip: It is required to add the class .active
to one of the carousel slides (i.e. on the .carousel-item
element), otherwise carousel will not be visible.
Note: The .slide
class on the .carousel
element adds CSS slide transition animation to the carousel that makes the carousel items slide when showing the new item.
Activate Carousels via JavaScript
You may also activate a carousel manually using the JavaScript — just call the carousel()
method with the id
or class
selector of the wrapper element in your JavaScript code.
<script>
$(document).ready(function(){
$("#myCarousel").carousel();
});
</script>
Tip: Manually activating a carousel via JavaScript can be helpful in a situation when you don't want your carousel to start sliding or animating at page load.
Options
There are certain options which can be passed to carousel()
Bootstrap method to customize the functionality of a carousel. Options can be passed via data attributes or JavaScript.
For setting the modals options via data attributes, just append the option name to data-bs
, such as data-bs-interval="3000"
, data-bs-pause="hover"
, and so on.
Name | Type | Default Value | Description |
---|---|---|---|
interval | number | 5000 | Specifies the amount of time to delay (in milliseconds) between one slide to another in automatic cycling. If false , carousel will not automatically cycle. |
keyboard | boolean | true | Specifies whether the carousel should react to keyboard events. By default it is true that means if carousel has focus you can go to its previous and next slide using the left and right arrow keys on the keyboard. |
pause | string | boolean | 'hover' | Pauses the cycling of the carousel when mouse pointer enters the carousel and resumes the cycling when mouse pointer leaves the carousel, by default. If set to false , hovering over the carousel won't pause it. |
ride | string | boolean | false | Autoplays the carousel after the user manually cycles the first item. If set to 'carousel' , autoplays the carousel on load. |
wrap | boolean | true | Specifies whether the carousel should cycle continuously or have hard stops (i.e stop at the last slide). |
touch | boolean | true | Specifies whether the carousel should support left/right swipe interactions on touchscreen devices. |
Data attributes provides an easy way for setting the carousel options, however JavaScript is the more preferable way as it prevents you from repetitive work. See the passing options section below to know how to set the options for carousels using JavaScript.
Methods
These are the standard bootstrap's carousels methods:
Passing options
You can additionally pass options to the carousels using options object.
The following example will turn off auto sliding in the carousel. By default Bootstrap carousel is started playing or sliding automatically when the page loads.
<script>
$(document).ready(function(){
$("#myCarousel").carousel({
interval: false
});
});
</script>
The following example will stop carousel from auto-sliding once the last slide has been reached.
<script>
$(document).ready(function(){
$("#myCarousel").carousel({
wrap: false
});
});
</script>
cycle
This method start carousel for cycling through the items from left to right.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCarousel").carousel("cycle");
});
});
</script>
pause
This method stops the carousel from cycling through items.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCarousel").carousel("pause");
});
});
</script>
prev
This method cycles the carousel to the previous item.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCarousel").carousel("prev");
});
});
</script>
next
This method cycles the carousel to the next item.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCarousel").carousel("next");
});
});
</script>
nextWhenVisible
Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible.
<script>
$(document).ready(function(){
$("#myCarousel").carousel("nextWhenVisible");
});
</script>
to
This method cycles the carousel to a particular frame (start with 0, similar to an array).
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>
dispose
This method destroys an element's carousel (i.e. removes stored data on the DOM element).
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var myCarousel = bootstrap.Carousel.getInstance($("#myCarousel")[0]);
console.log(myCarousel);
// {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
$("#myCarousel").carousel("dispose");
console.log(myCarousel);
// {_element: null, _items: null, _interval: null, _activeElement: null, _isPaused: null, …}
});
});
</script>
getInstance
This is a static method which allows you to get the carousel instance associated with a DOM element.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var myCarousel = bootstrap.Carousel.getInstance($("#myCarousel")[0]);
console.log(myCarousel);
// {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
});
});
</script>
getOrCreateInstance
This is a static method which allows you to get the carousel instance associated with a DOM element, or create a new one in case if the carousel wasn't initialized.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var myCarousel = bootstrap.Carousel.getOrCreateInstance($("#myCarousel")[0]);
console.log(myCarousel);
// {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
});
});
</script>
Events
Bootstrap's carousel class includes few events for hooking into carousel functionality.
Event | Description |
---|---|
slide.bs.carousel | This event fires immediately when the slide instance method is called. |
slid.bs.carousel | This event is fired when the carousel has completed its slide transition. |
The following example displays an alert message when sliding transition of a carousel item has been fully completed. Let's try it out and see how it actually works.
<script>
$(document).ready(function(){
$("#myCarousel").on("slid.bs.carousel", function(){
alert("The sliding transition of previous carousel item has been fully completed.");
});
});
</script>