I am having 3 Splide.Js sliders on a single page and I would like to add the progress bar as mentioned here -> https://splidejs.com/ under Slider Progress:
This my code so far (which works for the splide itself):
var splides = $('.highlights');
function slider1() {
for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
var splide = new Splide( splides[ i ], {
// Desktop on down
gap: '2.4em', // space between slides
autoWidth: true, // for cards with differing widths
waitForTransition: true,
breakpoints: {
991: {
// Tablet
},
767: {
// Mobile Landscape
destroy: true,
},
479: {
// Mobile Portrait
destroy: 'completely',
}
}
});
var bar = splide.root.querySelector( '.my-slider-progress-bar' );
splide.mount();
}
}
slider1();Where do I put this piece of code to make the bar works with each slide? I am currently getting the error "Cannot read properties of null (reading 'style')"
Progress Bar code:
// Update the bar width:
splide.on( 'mounted move', function () {
var end = splide.Components.Controller.getEnd() + 1;
bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
} );Thanks for any tips
between:
var bar = splide.root.querySelector( '.my-slider-progress-bar' );
and:
splide.mount();
such as:
var bar = splide.root.querySelector( '.my-slider-progress-bar' );
splide.on( 'mounted move', function () {
var end = splide.Components.Controller.getEnd() + 1;
bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
} );
splide.mount();