I've built a small, responsive, lazy loading carousel that pauses on mouseover. The problem I'm having is occurring after either the 'prev' or 'next' buttons are pressed. Once pressed the mouseover pause event stops working.
Is this an order of execution problem or should I be placing the event listener somewhere inside the carousel()?
var carouselIndex=0;
var carouselID=document.getElementById("carousel");
var carouselPrev=document.getElementById("carousel-prev");
var carouselNext=document.getElementById("carousel-next");
var carouselArray=document.getElementsByClassName("carousel-item");
var intervalID;
var speed=5000;
function carouselPlus(n){
clearInterval(intervalID);
carouselIndex+=n;
carousel(carouselIndex)
}
function carousel(n){
var i;
if(n>carouselArray.length){carouselIndex=1}
if(n<1){carouselIndex=carouselArray.length}
if(carouselIndex>carouselArray.length){carouselIndex=1}
if(carouselArray[carouselIndex-1].classList.contains("lazy")){
carouselArray[carouselIndex-1].classList.remove("lazy")
}
for(i=0;i<carouselArray.length;i++){
carouselArray[i].style.opacity="0";
carouselArray[i].style.zIndex="0"
}
setTimeout(function(){
carouselArray[carouselIndex-1].style.opacity="1";
carouselArray[carouselIndex-1].style.zIndex="1"
},500);
intervalID=setInterval(carouselPlus,speed,1);
}
carouselPrev.addEventListener("click",function(){carouselPlus(-1)});
carouselNext.addEventListener("click",function(){carouselPlus(1)});
carouselPlus(1);
carouselID.addEventListener("mouseover",function(){clearInterval(intervalID)});
carouselID.addEventListener("mouseout",function(){intervalID=setInterval(carouselPlus,speed,1)});
UPDATE
Figured it out, looks like I was calling the setInterval() and clearInterval() functions at the wrong times which was causing all kinds of timing problems, especially when combined with the 'click' events connected to the tabs.
I also cleaned up the image transitions a little while I was at it. Here is a look at the slightly modified javaScript and a working JSFiddle link.
var carouselIndex=0;
var carouselID=document.getElementById("carousel");
var carouselPrev=document.getElementById("carousel-prev");
var carouselNext=document.getElementById("carousel-next");
var carouselArray=document.getElementsByClassName("carousel-item");
var intervalID;
var speed=5000;
function carouselPlus(n){
carouselIndex+=n;
carousel(carouselIndex)
}
function carousel(n){
var i;
if(n>carouselArray.length){carouselIndex=1}
if(n<1){carouselIndex=carouselArray.length}
if(carouselArray[carouselIndex-1].classList.contains("lazy")){carouselArray[carouselIndex-1].classList.remove("lazy")}
for(i=0;i<carouselArray.length;i++){
if(i!=carouselIndex-1){
carouselArray[i].style.opacity="0";
carouselArray[i].style.zIndex="0"
} else {
carouselArray[carouselIndex-1].style.opacity="1";
carouselArray[carouselIndex-1].style.zIndex="1"
}
}
}
carouselID.addEventListener("mouseover",function(){clearInterval(intervalID)});
carouselID.addEventListener("mouseout",function(){intervalID=setInterval(carouselPlus,speed,1)});
carouselPrev.addEventListener("click",function(){carouselPlus(-1)});
carouselNext.addEventListener("click",function(){carouselPlus(1)});
intervalID=setInterval(carouselPlus,speed,1);