0

Bom, estou tendo alguns problemas com um carrossel criado por mim mesmo, mais especificamente na ordem de transição dos itens.

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();

No primeiro slide, ele demora o dobro de tempo quando a página é iniciada, em seguida, funciona normalmente, como posso corrigir ? há algo no código também, no qual eu possa melhorar ?

3
  • mas o problema não é no html, é apenas o js mesmo, pois, queria saber o porque de ele demorar o dobro de tempo para carregar o primeiro slide para trás Commented 21/03/2017 às 12:30
  • acho que o HTML não ajudaria muito, pois é uma div com figures dentro Commented 21/03/2017 às 12:30
  • vou editar com os complementos das funções, esqueci disso Commented 21/03/2017 às 12:32

1 Resposta 1

2

No fundo o que se passa com a primeira volta é que ela vai fazer o seguinte:

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

porque o count ainda é 0, ou seja esta volta aparentemente demora o dobro do tempo das outras, inicia e reseta o count a 1:

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

E acho que fica resolvido, 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();

Também podes optar por outra abordagem, eu faria assim:

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();

5
  • resolveu no primeiro banner, mas no retorno ele dobra o tempo agora :/ Commented 21/03/2017 às 12:39
  • 1
    Vou ver melhor o que pode estar a acontecer @MuriloGambôa
    – Miguel
    Commented 21/03/2017 às 12:40
  • aqui, sem saber o motivo estava com um pequeno bug, ainda no timer do ultimo banner, então ao invés de colocar a length total, subtraí 1, porém não lia o ultimo banner, então eu subtraí apenas .5, e está funcionando normal agora Commented 21/03/2017 às 12:54
  • 1
    Como, @MuriloGambôa? É preciso fazer algum ajuste na resposta?
    – Miguel
    Commented 21/03/2017 às 12:54
  • não, a resposta ta certa :D foi mais mesmo um problema nos meus elementos agr ;) Commented 21/03/2017 às 12:57

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 .