How to create an infinite loop on a Carousel?

Question

Well, I’m creating a Carousel, but it’s come to a point where I’m stuck because I don’t know how to do it, I need to create an infinite loop between the items inside the Carousel, how can I do that ?

Follow the code created so far

JS

function carousels(){

        //Capturar os carousels na page
        var carousels = document.querySelectorAll(".carousel");
        //Captura tamanho da tela
        var windowWidth = window.innerWidth;
        //Abrir função para cada um
        for(var iCarousels = 0; iCarousels < carousels.length; iCarousels++){
            var bannersIn = carousels[iCarousels].querySelectorAll("figure");
            carousels[iCarousels].style.width = bannersIn.length * windowWidth + "px";
            for(var iBannersIn = 0; iBannersIn < bannersIn.length; iBannersIn++){
                bannersIn[iBannersIn].style.width = windowWidth + "px";
            }
            setInterval(function(){

            }, 2000)
        }
    }carousels();

CSS

.banner-holder {
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
}
.banner-holder .carousel {
    height:100%;
    position:absolute;
    display:flex;
    transition:all 1s ease-out;
}
.banner-holder .carousel figure {
    position:relative;
    overflow:hidden;
    height:100%;
    display:flex;
    align-items:center;
}
.banner-holder .carousel img {
    min-width:100%;
   position:absolute;
   height:100%;
   left:50%;
   top:50%;
   transform:translate(-50%,-50%);
}

HTML

<div class="banner-holder">
        <div class="carousel">
            <figure>
                <img src="assets/site/banners/banners_00.jpg">
                <figcaption>

                </figcaption>
            </figure>
            <figure>
                <img src="assets/site/banners/banners_01.jpg">
                <figcaption>

                </figcaption>
            </figure>
            <figure>
                <img src="assets/site/banners/banners_02.jpg">
                <figcaption>

                </figcaption>
            </figure>
        </div>
    </div>

Answer 1

At the end of all operations that occur within the loop, check that the value of the current Carrousel is greater than the total length, if it is, just reset the current value so that it does not close the looping.

EIDT:

I imagine that the use of the setInterval() function is to give the delay between an image and another, not needing to be repeated every 2000ms, in Javascript there is the similar function, setTimeout(), the difference is that it waits the time to execute the action, and runs it only once. I changed the comparison of your for so that the if at the beginning works without the need to decrease the lenght.

function carousels(){
    //Capturar os carousels na page
    var carousels = document.querySelectorAll(".carousel");
    //Captura tamanho da tela
    var windowWidth = window.innerWidth;
    //Abrir função para cada um
    for(var iCarousels = 0; iCarousels <= carousels.length; iCarousels++){
        if(iCarousels == carousels.length){
            iCarousels = 0;
        }
        var bannersIn = carousels[iCarousels].querySelectorAll("figure");
        carousels[iCarousels].style.width = bannersIn.length * windowWidth + "px";
        for(var iBannersIn = 0; iBannersIn < bannersIn.length; iBannersIn++){
            bannersIn[iBannersIn].style.width = windowWidth + "px";
        }
        //setInterval(function(){}, 2000)
        setTimeout(function(){}, 2000);
    }
}carousels();