function rafAsync() { return new Promise(resolve => { requestAnimationFrame(resolve); //faster than set time out }); } function checkElement(selector) { if (document.querySelector(selector) === null) { return rafAsync().then(() => checkElement(selector)); } else { return Promise.resolve(true); } } var slideIndex = 1; // Next/previous controls function plusSlides(n, className = "mySlides") { console.log("changing slides"); showSlides(slideIndex += n, className); } // Thumbnail image controls function currentSlide(n, className = "mySlides") { showSlides(slideIndex = n, className); } function showSlides(n, className = "mySlides") { var i; var slides = document.getElementsByClassName(className); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" carousel-active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " carousel-active"; } checkElement('.mySlides') //use whichever selector you want .then((element) => { console.log("sldaldsaldsa"); showSlides(slideIndex); }); checkElement('.mySlides2') //use whichever selector you want .then((element) => { console.log("sldaldsaldsa"); showSlides(slideIndex, "mySlides2"); }); checkElement('.mySlides3') //use whichever selector you want .then((element) => { console.log("sldaldsaldsa"); showSlides(slideIndex, "mySlides3"); }); checkElement('.mySlides4') //use whichever selector you want .then((element) => { console.log("sldaldsaldsa"); showSlides(slideIndex, "mySlides4"); }); checkElement('.mySlides5') //use whichever selector you want .then((element) => { console.log("sldaldsaldsa"); showSlides(slideIndex, "mySlides5"); });