1

Bom, estou tentando fazer um carousel em JS vanilla, porém, ocorre um erro na hora de criar a parte do script para a rotação do carousel

JS

//Cada Carousel
var bannersHolders = document.querySelectorAll(".banner-holder");
//Cada base para as imagens
var carousels = document.querySelectorAll(".banner-holder .carousel");
//Width e Height para definir os tamanhos dos carousels
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
//Definir width total de cada carousel
for(var iCarousels = 0; iCarousels < carousels.length; iCarousels++){
    var bannersInThis = carousels[iCarousels].querySelectorAll("figure");
    carousels[iCarousels].style.width = (bannersInThis.length * windowWidth) + "px";
    //Definir width de cada banner dentro de cada carousel
    for(var iBanners = 0; iBanners < bannersInThis.length; iBanners ++){
        bannersInThis[iBanners].style.width = windowWidth + "px";
    }
    setTimeout(function(){
        for(var iBanners = 0; iBanners < bannersInThis.length; iBanners++){
            carouselAtual.style.left = ("-" + (windowWidth * bannersInThis[iBanners])) + "px"
        }
    },5000);
}

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>
        <!-- Adicionar banners com resolução entre 1440x1024 e 1920x1240 aqui -->
    </div>
</div>

CSS

*{margin:0;padding:0;list-style:none;outline:none;text-decoration:none;box-sizing:border-box;font-family:"Proza Libre",sans-serif;}
html,body{height:100%;}
.banner-holder{width:100%;height:100%;position:relative;overflow:hidden;}
.banner-holder .carousel{height:100%;position:absolute;display:flex;}
.banner-holder .carousel figure{position:relative;overflow:hidden;height:100%;}
.banner-holder .carousel img{min-width:100%;position:absolute;height:100%;left:50%;top:50%;transform:translate(-50%,-50%);}

Erro

Uncaught TypeError: Cannot read property 'length' of undefined

Como posso corrigir o problema ? O que o causou ?

1 Resposta 1

1

Testando seu código o erro que tive não foi na propriedade length de nenhum dos seus querySelectorAll. Obtive erro de declaração do carouselAtual que está no seu setTimeout. Acredito que você precise trocar esta linha de código:

carouselAtual.style.left = ("-" + (windowWidth * bannersInThis[iBanners])) + "px"

Por:

bannersInThis[iBanners].style.left = "-" + windowWidth + "px";

De qualquer forma, se a intenção é que o carousel fique trocando a imagem, o ideal seria utilizar setInterval e não setTimeout.

3
  • continua com o mesmo erro :/ Commented 30/05/2017 às 12:21
  • quando jogo no console a função, ele aponta "-NaNpx" Commented 30/05/2017 às 12:24
  • 1
    Está acusando Not-a-Number no seu cálculo desse trecho: ("-" + (windowWidth * bannersInThis[iBanners])) + "px". Retorna um console.log de windowWidth e bannersInThis[iBanners] para descobrir o que está trazendo este erro Commented 30/05/2017 às 12:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .