0

我在一个页面上有 3 个 Splide.Js 滑块，我想添加此处提到的进度条 - > https://splidejs.com/ 在滑块进度下：

到目前为止，这是我的代码（适用于幻灯片本身）：

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();

我在哪里放置这段代码以使栏适用于每张幻灯片？我目前收到错误“无法读取 null 的属性（读取 'style'） ”

进度条码：

 // 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 ) + '%';
  } );

感谢您的任何提示

4

0 回答 0