S
actually this is because you have fired a timer on the slide update
showSlides2: function () {
if (!this.slideIndex) {
this.slideIndex = 0;
}
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
console.log(slides[i]);
slides[i].style.display = "none";
}
this.slideIndex++;
slides[this.slideIndex - 1].style.display = "block";
if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 }
setInterval(this.showSlides2, 2000); //< ------- here restarts the function, BUT inside the function 'this'; becomes the context of the timer routine and not the module..
this.updateDom(1000); // or whatever transition time u want.
},
to fix it you need an arrow function to keep context right
see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
but net
showSlides2: function () {
if (!this.slideIndex) {
this.slideIndex = 0;
}
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
console.log(slides[i]);
slides[i].style.display = "none";
}
this.slideIndex++;
slides[this.slideIndex - 1].style.display = "block";
if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 }
setInterval( () => { this.showSlides2()} , 2000); // < --- was a typo here.. need () => { stuff }
this.updateDom(1000); // or whatever transition time u want.
},