Carousel Progress


With just a few lines, you can create a carousel progress bar like this:


We can create the bar with <div> tags and CSS:

<section class="splide" aria-label="...">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<!-- Add the progress bar element -->
<div class="my-carousel-progress">
<div class="my-carousel-progress-bar"></div>
.my-carousel-progress {
background: #ccc;
.my-carousel-progress-bar {
background: greenyellow;
height: 2px;
transition: width 400ms ease;
width: 0;

I recommend using the same value of the carousel speed (options.speed) as the transition duration. It makes the carousel and the bar look more synchronized.


We can calculate the progress rate from the current index and the end index — ( current + 1 ) / ( end + 1 ). Let's update the width of the bar via Splide#index and Controller#getEnd() every time when the carousel moves:

var splide = new Splide( '.splide' );
var bar = splide.root.querySelector( '.my-carousel-progress-bar' );
// Updates the bar width whenever the carousel moves:
splide.on( 'mounted move', function () {
var end = splide.Components.Controller.getEnd() + 1;
var rate = Math.min( ( splide.index + 1 ) / end, 1 ); = String( 100 * rate ) + '%';
} );

To settle the initial width, the example code also listens to the mounted event.


You can create a clickable progress bar with a few more steps:

  • Compute a target index by a clicked position
  • Move the carousel by Splide#go()

For accessibility, I recommend providing aria attributes, such as aria-controls, aria-valuenow and more. This document may help you.