Using progress bars when initializing with a for loop?

[pelledesign]

Hey,

I'm trying to get my progress bars to work when initializing the sliders with a for loop as shown below.
I'm not sure about how to get it right.
The sliders and progress bars seem to initialize fine, but then only the last slider updates its progress when it's moved
Any ideas?
Thanks!

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

and the 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>

[NaotoshiFujita]

That's very common failure for variable scope.
https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example

[pelledesign]

Thanks man, got it working:

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

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