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. },