Problems with the time interval on a carousel

Question

Well, I’m having some problems with a self-made carousel, more specifically in the transition order of the items.

var carouselBannerHolder = document.getElementById("banners-slider");
var itemsCarousel = document.querySelectorAll(".banners-slider figure");
var count = 0;    
carouselBannerHolder.style.width = (parseInt(itemsCarousel.length)) + "00%";

function ordemComumSlide(){
    setInterval(function(){
        if(count < itemsCarousel.length){
            carouselBannerHolder.style.left = ("-" + count + "00%");
            count++;
        }else{
            return count = 0;
        }
    },2500);
};
ordemComumSlide();

On the first slide, it takes twice as long when the page starts, then works normally, how can I fix ? there’s something in the code too, in which I can improve ?

Answer 1

Deep down, what’s going on with the first lap is that she’s going to do the following:

carouselBannerHolder.style.left = ("-000%");

because Count is still 0, that is this return apparently takes twice as long as the others, starts and resets Count to 1:

count = 1;
...
else {
     carouselBannerHolder.style.left = ("0");
     count = 1;
}
...

And I think that’s settled, ex:

var len = 3;
var count = 1;
function ordemComumSlide(){
    setInterval(function(){
        if(count < len){
           console.log("-" + count + "00%");
           count++;
        }else{
           console.log("0");
           count = 1;
        }
    },1500);
};
ordemComumSlide();

You can also choose another approach, I would do so:

var len = 3;
var count = 0;
function ordemComumSlide(){
    setInterval(function(){
        count++;
        if(count >= len){
           count = 0;
        }
        //carouselBannerHolder.style.left = ("-" + count + "00%");
        console.log("-" + count + "00%");
    },1500);
};
ordemComumSlide();