Progress bar pagination for each slide?

[macca-droid]

As opposed to pagination dots is it possible to have multiple progress bars?

I know you can have one progress bar in view and this works well but what I would like is, for example, on a 4 slide carousel the ability to show 4 progress bars with the current .active one animating - very much like Instagram Stories?

Thank you!

[NaotoshiFujita]

Yes, but you have to write some scripts, using some events:

• https://splidejs.com/guides/autoplay/#progress-rate
• https://splidejs.com/guides/events/#active

The idea is like this:

let activeBar;

splide.on( 'autoplay:playing', rate => {
  // update the bar width here
} );

splide.on( 'active', () => {
  // reset all bars and switch the active bar element
} );

[macca-droid]

OK, good to know it can be done. Beyond my skillset though so I'll have to wait for someone clever to come along!

Thanks for a great script by the way.

[S1SYPHOS]

OK, good to know it can be done. Beyond my skillset though so I'll have to wait for someone clever to come along!

Hey there @macca-droid, I'm far from being any good at JS, but for future reference, it goes something like this:

document.addEventListener( 'DOMContentLoaded', function() {
    var splide = new Splide('.splide', {
        // ...
    });

    let activeBar;

    splide.on('active', Slide => {
        activeBar = Slide.slide.querySelector('.splide__progress__bar')
    });

    splide.on('autoplay:playing', rate => {
        activeBar.style.width = `${rate * 100}%`
    });

    splide.mount();
});

[S1SYPHOS]

I just realized how flexible splidejs really is .. great stuff!

[cathy-codes]

Hi @S1SYPHOS, I followed the Carousel Progress tutorial where I could get the progress bar width to change on screen.

However I'm a bit stuck following the code you'd written, I've tried debugging it myself using console.log(bar) and got

(the width value is constantly changing but the change isn't reflected on the screen). Can you give me any pointers on this?

document.addEventListener('DOMContentLoaded', function () {
	var highlightsCarousel = new Splide('#highlights-carousel', {
		type: 'loop',
		pagination: false,
		autoplay: true,
		interval: 8000,
	});

	var bar;

	highlightsCarousel.on('active', Slide => {
		bar = Slide.slide.querySelector('.my-carousel-progress-bar');
	});

	highlightsCarousel.on('autoplay:playing', rate => {
		bar.style.width = `${rate * 100}%`;
		console.log(bar);
	});

	highlightsCarousel.mount();
});

[S1SYPHOS]

I'll look into it if I find the time ;)