Slider Colorado

		

<script>
    
let arrayContainerEsquerda = document.querySelectorAll(".containerEsquerda");
let arrayConteudoDireita = document.querySelectorAll(".conteudoDireita");
let arrayLataSlider = document.querySelectorAll(".lataSlider");


let nextButton = document.querySelector(".nextButton");
let prevButton = document.querySelector(".prevButton");

ultimoContainerEsquerda = arrayContainerEsquerda.length -1
index = 0

function movimentarSlide(){
    let lataSliderAtivo = document.querySelector(".lataSlider.ativo");
    lataSliderAtivo.classList.add("lataSubiu")
    let lataSubiu = document.querySelector(".lataSlider.lataSubiu");
    setTimeout(() => {
        lataSubiu.classList.remove("lataSubiu");
    }, 1000);
    lataSliderAtivo.classList.remove("ativo");
    setTimeout(() => {
        arrayLataSlider[index].classList.add("ativo");;
    }, 500);
    

    let conteudoDireitaAtivo = document.querySelector(".conteudoDireita.ativo");
    conteudoDireitaAtivo.classList.remove("ativo");
    arrayConteudoDireita[index].classList.add("ativo");

    let containerEsquerdaAtivo = document.querySelector(".containerEsquerda.ativo");
    containerEsquerdaAtivo.classList.remove("ativo");
    setTimeout(() => {
         arrayContainerEsquerda[index].classList.add("ativo");
     }, 600);
}

nextButton.onclick = () =>{
    if(index < ultimoContainerEsquerda){
        index ++;
        movimentarSlide();
    }else{
        index = 0;
        movimentarSlide();
    }
}

prevButton.onclick = () =>{
    if(index > 0){
        index --;
        movimentarSlide();
    }else{
        index = ultimoContainerEsquerda;
        movimentarSlide();
    }
}


</script>