Splide Slider - 使用for循环初始化时使用进度条？答案

【问题标题】：Splide Slider - Using progress bars when initializing with a for loop?Splide Slider - 使用for循环初始化时使用进度条？
【发布时间】：2021-12-02 18:45:57
【问题描述】：

在使用 for 循环初始化滑块时，我试图让我的滑动进度条工作，如下所示。我不确定如何正确处理。滑块和进度条似乎初始化得很好，但是只有最后一个滑块在移动时会更新其进度。处理过 Splide 的人有什么想法吗？谢谢！

var splides = document.querySelectorAll('.splide-slider');

if(splides.length){
    for(var i=0; i<splides.length; i++){
        var splideElement = splides[i];
        var splideId = splideElement;
        var splideClassname = splideElement.classList[0];   
      
        var splideDefaultOptions = 
        {
            lazyLoad: 'nearby',
            preloadPages: 2,
            autoWidth: true,
            wheel: true,
            arrows: true,
            pagination: false,  
            waitForTransition: false,
            perPage: 1,
        }
        
            var splide = new Splide( splideElement, splideDefaultOptions );
            
            splide.on( 'mounted move', function () {
            var getBar = '.'+ splideClassname + ' .my-slider-progress-bar';
            var bar = splide.root.querySelector(getBar);    
            var end = splide.Components.Controller.getEnd() + 1;
            bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
            } );
            
        splide.mount();
    }
}

和 HTML：

<div class="splide-slider">
  <div class="splide__track">
        <ul class="splide__list">
            <div class="splide__slide"></div>   
            <div class="splide__slide"></div>   
            <div class="splide__slide"></div>   
        </ul>
  </div>
    <div class="my-slider-progress">
        <div class="my-slider-progress-bar"></div>
    </div>  
</div>
<div class="splide-slider">
  <div class="splide__track">
        <ul class="splide__list">
            <div class="splide__slide"></div>   
            <div class="splide__slide"></div>   
            <div class="splide__slide"></div>   
        </ul>
  </div>
    <div class="my-slider-progress">
        <div class="my-slider-progress-bar"></div>
    </div>  
</div>

【问题讨论】：

标签： slider splidejs

【解决方案1】：

好的，对于可能处于相同情况的任何人，我都错过了范围问题。工作解决方案是：

for (let i = 0; i < splides.length; i++) {

    funcs[i] = function() {
      let splideElement = splides[i];
      var splideClassname = splideElement.classList[0]; 
              
      var splideDefaultOptions = 
      {
      lazyLoad: 'nearby',
      preloadPages: 2,
      autoWidth: true,
      wheel: true,
      arrows: true,
      pagination: false,    
      waitForTransition: false,
      perPage: 1,
      }
                  
      var splide = new Splide( splideElement, splideDefaultOptions );
      
      splide.on( 'mounted move', function () {
      var getBar = '.'+ splideClassname + ' .my-slider-progress-bar';
      var bar = splide.root.querySelector(getBar);  
      var end = splide.Components.Controller.getEnd() + 1;
      bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
      });
              
      splide.mount();

    };
}
for (var j = 0; j < splides.length; j++) {
        funcs[j]();
}

【讨论】：