Tengo 3 controles deslizantes Splide.Js en una sola página y me gustaría agregar la barra de progreso como se menciona aquí -> https://splidejs.com/ en Progreso del control deslizante:
Este es mi código hasta ahora (que funciona para el propio splid):
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();¿Dónde pongo este fragmento de código para que la barra funcione con cada diapositiva? Actualmente recibo el error " No se pueden leer las propiedades de nulo (leyendo 'estilo') "
Código de barras de progreso:
// 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 ) + '%'; } );gracias por cualquier consejo
Entre:
var bar = splide.root.querySelector('.my-slider-progress-bar');
y:
splid.mount();
como:
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();