Categories
Bootstrap HTML

Bootstrap 5 — Carousel Customization

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.