Web Development: How to Convert Bootstrap Carousel Indicators Into Animated Progress Bars

How to Convert Bootstrap Carousel Indicators Into Animated Progress Bars

In this tutorial, we’ll work with another exciting Bootstrap extension. Specifically, we’ll build a Bootstrap carousel component and customize its indicators to look like animated progress bars. In that way, we’ll have a clear view of when the next slide is about to load.

Our Bootstrap Carousel Extension

Here’s what we’ll be creating:

1. Create a Bootstrap Carousel With Indicators

Assuming that we’ve installed the required Bootstrap files, we’ll first construct an image carousel (images from Unsplash) with indicators, by taking advantage of the basic code for the carousel component that the framework provides us.

Here’s the necessary code:

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
      <span></span>
    </button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
      <span></span>
    </button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
      <span></span>
    </button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="bs-carousel1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="bs-carousel2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="bs-carousel3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Pay attention to two things:

We add the data-bs-pause="false" attribute to prevent pausing the carousel when we hover over it.
We add an empty span element to each carousel indicator. That will behave as our progress bar.

2. Customize the Bootstrap Indicators

As a next step, we’ll customize the default indicators styling. We’ll make them bigger and absolutely position their span on top of it. Initially, the spans will have zero-width. That width will increase gradually as soon as the corresponding slide becomes active.

The indicators layout before and after our styles

Here are the associated styles:

.carousel-indicators [data-bs-target] {
  position: relative;
  width: 60px;
  height: 6px;
  border: none;
  border-radius: 24px;
}

.carousel-indicators [data-bs-target] span {
  content: ’’;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #7952b3;
  border-radius: inherit;
}

3. Create a Progress Element for Each Slide

When the page loads or a slide changes, the fillCarouselIndicator() function will fire.

This function will receive as a parameter the active slide. Initially, we’ll consider the first slide to be the active one.

Inside it, we’ll do the following things:

Run a function every 50ms whose job will be to gradually animate the span width of the active indicator up to 100%.
Initially, set the width of all spans to zero and cancel the execution of the scheduled call (if any). We do this as a precaution in case we decide to change a slide earlier than Bootstrap’s default autoplay behavior (every 5000ms).

Prevent the execution of the scheduled call

With all the above in mind, here’s the associated code:

...

function fillCarouselIndicator(index) {
  let i = 0;
  // 2
  for (const carouselIndicator of carouselIndicators) {
    carouselIndicator.style.width = 0;
  }
  clearInterval(intervalID);

  // 1
  intervalID = setInterval(function () {
    i++;
    myCarousel.querySelector(".carousel-indicators .active span").style.width =
      i + "%";
  }, 50);
}

By default, the carousel component changes the active slide every 5000ms. To synchronize this behavior with our code, the function inside the setInterval() method should run every 50ms. Normally, its last call is when the value of the i variable is set to 100 (100 * 50 = 5000). If, for some reason, you want to change the predefined time needed for cycling between slides, remember, also, to modify the given interval time accordingly. For example, if you set the carousel’s interval time to 6000, you have to give 60 as the second parameter of our interval method.

Accuracy?

If you have ever worked with JavaScript timers (setTimeout(), setInterval()), you might have seen that they aren’t always accurate. Besides, they can behave differently across various browsers/devices.

In my testing, our example worked fine in browsers like Chrome and Edge, but on Firefox, the next slide was revealing while the active indicator had a width of around 80%.

So, let’s perform a simple fix to ensure browser compatibility. More specifically, we’ll add three things:

First, we’ll get a reference for our carousel. That will give us the ability to use its API methods.
Then, each time a slide changes, we’ll pause the carousel.
Finally, we’ll force navigation to the next slide as soon as the span width of the active indicator becomes 100%. With this addition, the data-bs-pause="false" attribute that we added earlier won’t play any role, so feel free to remove it if you want.

Here’s the extra JavaScript code needed for this functionality:

// 1
const carousel = new bootstrap.Carousel(myCarousel);

function fillCarouselIndicator(index) {
  ...
  // 2
  carousel.pause();

  intervalID = setInterval(function () {
    ...

    if (i >= 100) {
      // 3
      carousel.next();
    }
  }, 50);
}

Instead of the slide.bs.carousel event that we used here, you could use the slid.bs.carousel one as well. In such a case, you have to customize the code a little bit.

Conclusion

That’s it, folks! During this short exercise, we learned how to create unique Bootstrap carousels by converting their indicators into animated progress bars.

Hopefully, you found this technique beneficial and plan to incorporate it in one of your upcoming projects.

Once again, here’s what we built:

If you want to expand your Bootstrap knowledge, be sure to look at the constantly evolving Bootstrap resources here at Tuts+.

As always, thanks a lot for reading!

Web Development

Tuesday, September 21, 2021

How to Convert Bootstrap Carousel Indicators Into Animated Progress Bars

Our Bootstrap Carousel Extension

1. Create a Bootstrap Carousel With Indicators

2. Customize the Bootstrap Indicators

3. Create a Progress Element for Each Slide

Accuracy?

Conclusion

Bootstrap Templates on Envato Elements

No comments:

Post a Comment