Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to customize carousels with Bootstrap 5.
Crossfade
We can add the .carousel-fade class to animate the slides with fade transitions.
For example, we can write:
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
```
We add the `.carousel-fade` class to add the fade effect.
It’s not working in alpha version of Bootstrap 5 yet.
### Individual `.carousel-item` Interval
We can change the slide change duration for each slide with the `data-interval` attribute.
For example, we can write:
```
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="2000">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
</code></pre>
<pre><code><div class="carousel-item" data-interval="3000">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
</code></pre>
<pre><code> <div class="carousel-item" data-interval="4000">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
</div>
</code></pre>
<p><a class="carousel-control-prev" href="#carousel" data-slide="prev"><br>
<span class="carousel-control-prev-icon"></span><br>
<span class="sr-only">Previous</span><br>
</a></p>
<pre><code> <a class="carousel-control-next" href="#carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
```
We have the `data-interval` attribute to set the duration that each slide is shown in milliseconds.
### JavaScript
We can create the carousel object with JavaScript and then do what we want with it.
For example, we can write:
```
const carouselEl = document.querySelector('#carousel')
const carousel = new bootstrap.Carousel(carouselEl)
```
to create the carousel object from our carousel.
The `bootstrap.Carousel` constructor takes a DOM object with the carousel we created in HTML.
To add options, we can pass in a 2nd argument:
```
const carouselEl = document.querySelector('#carousel')
const carousel = new bootstrap.Carousel(carouselEl, {
interval: 2000,
wrap: false
})
```
We set the slide duration to change slides.
### Events
Carousels also emit a few events.
They emit the `slide.bs.carousel` event when the `slide` instance is invoked.
`slid.bs.carousel` is emitted when the carousel has completed the slide transition.
The event object has the `direction` property to indicate slide direction.
`relatedTarget` has the DOM element that’s slid into place.
`from` has the index of the current item.
`to` has the index of the next item.
To listen to an event, we can use `addEventListener` :
```
const carouselEl = document.querySelector('#carousel')
carouselEl.addEventListener(‘slide.bs.carousel’, () => {
// …
})
We get the carousel element and call `addEventListener` to it.
### Change Transition Duration
The duration of the transition can be changed with the `$carousel-transition` SASS variable.
For example, we can write:
transform 2s ease, opacity 1s ease-out
as its value.
### Conclusion
We can customize the transition effects of carousels.
Also, we can change the transition interval with various methods.