How to create an infinite loop in a Carousel?

Question

How to create an infinite loop in a Carousel?

Navigation

#1 by (-2 votes)

0

Well, I'm creating a Carousel, but it has reached a point where I crashed for not knowing how to do it, I need to create an infinite loop between the items inside the carousel, how can I accomplish this?

Follow the code you've 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>

javascript css

asked by anonymous 30.05.2017 / 20:25

1 answer

How to generate an automatic sequential number in C # How to transform the data from a sql table into a link?

score -2 · Answer 1

At the end of all operations that occur within the loop, make sure the current carusel value is greater than the total lenght, if it is, simply zero the current value so it does not end the looping.

EIDT:

I imagine that the use of the function setInterval () is to give the delay between one image and another, not needing to be repeated every 2000ms, in Javascript there is a similar function, setTimeout (), the difference is that it waits the time to perform the action, and perform it only once. I changed the comparison of your for so that if in the beginning it worked without the necessity of decrementing 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();