Блог

Я пытаюсь заставить работать индикаторы выполнения сплайда при инициализации ползунков с помощью цикла for, как показано ниже. Я не уверен в том, как все сделать правильно. Ползунки и индикаторы выполнения, похоже, нормально инициализируются, но затем только последний ползунок обновляет свой прогресс при перемещении. Есть какие-нибудь идеи от кого-то, кто имел дело со Сплайдом? Спасибо!

 var splides = document.querySelectorAll('.splide-slider');  if(splides.length){  for(var i=0; ilt;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:

 lt;div class="splide-slider"gt;  lt;div class="splide__track"gt;  lt;ul class="splide__list"gt;  lt;div class="splide__slide"gt;lt;/divgt;   lt;div class="splide__slide"gt;lt;/divgt;   lt;div class="splide__slide"gt;lt;/divgt;   lt;/ulgt;  lt;/divgt;  lt;div class="my-slider-progress"gt;  lt;div class="my-slider-progress-bar"gt;lt;/divgt;  lt;/divgt;  lt;/divgt; lt;div class="splide-slider"gt;  lt;div class="splide__track"gt;  lt;ul class="splide__list"gt;  lt;div class="splide__slide"gt;lt;/divgt;   lt;div class="splide__slide"gt;lt;/divgt;   lt;div class="splide__slide"gt;lt;/divgt;   lt;/ulgt;  lt;/divgt;  lt;div class="my-slider-progress"gt;  lt;div class="my-slider-progress-bar"gt;lt;/divgt;  lt;/divgt;  lt;/divgt;  

Итак, для всех, кто может оказаться в такой же ситуации, я пропустил вопрос о масштабах. Рабочим решением является:

 for (let i = 0; i lt; 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 lt; splides.length; j  ) {  funcs[j](); }