Animated Slider in Pure Javascript

Question

I researched several questions of the type, both in English and Portuguese and could not do, because I could not understand the logic to leave the slider of my site animated, with the images "sliding" to the side. Could someone help me?

the HTML:

<div class="row">
<div class="eight columns all">
    <img id="img-slide">
    <img src="img/seta2.png" class="slide-seta" id="prev">
    <img src="img/seta1.png" class="slide-seta" id="next">

the functions in JS:

function slide1(){
    document.getElementById('img-slide').src="img/slide_1.jpg";
    setTimeout("slide2()", 2500);
}

function slide2(){
    document.getElementById('img-slide').src="img/slide_2.jpg";
    setTimeout("slide3()", 3000);
}

function slide3(){
    document.getElementById('img-slide').src="img/slide_3.jpg";
    setTimeout("slide1()", 3000);
}

and the CSS:

#img-slide{
    margin:15px;
    height: 95%;
    width:95%;
    border-radius:5px;
}

It is currently working this way: www.gabrielozzy.com/site-love

As I said, I did a lot of research on several sites and I couldn’t understand the logic, so I couldn’t do it. Could someone help me? I would like to use pure javascript.

Answer 1

Well, I’m going to post a simple example, which is for study purposes:

One of the ways to solve the problem is to imagine that we have several images that will go through a "window", which is nothing more than a div that will allow the visibility of one image at a time.

Follows the CSS:

img{
    position:absolute;
    width:100%;
    height:100%;
    margin-left:100%;

    -webkit-transition: margin-left 500ms ease-in;
    -moz-transition: margin-left 500ms ease-in;
    -o-transition: margin-left 500ms ease-in;
    transition: margin-left 500ms ease-in;
}
div{
    overflow:hidden;
    position: relative;
    width:350px;
    height:200px;
}
.ativa{
    margin-left:0%;
}

The HTML structure:

<div id="container">
   <img src="imagem1.jpg" class="ativa">
   <img src="imagem2.jpg">
   <img src="imagem1.jpg">
</div>

And finally, the JS with the proper comments:

var proximaImagem = 1;//guarda a posição da imagem que deve entrar na tela, no caso é a imagem da posição 1, pois a imagem 0 já está visível na tela
var zIndexAtual = 0;//usado para criar um aumento progressivo no z-index
var imagens = document.getElementById("container").children;//pega todos os nodos filhos da div #container, ou seja, nossa coleção de imagens

function avancarImagem(){
    imagem = imagens[proximaImagem];//armazena a proxima imagem na fila em uma variável
    imagem.style.zIndex = ++zIndexAtual;//aumenta o índice do z-index e atribui à próxima imagem da fila
    imagem.style.marginLeft = "0%";//reseta a margem da imagem, fazendo ela entrar na tela

    proximaImagem++;//ajusta o índice que aponta a próxima imagem

    //caso o índice tenha alcançado o fim da fila, resetá-lo
    if(proximaImagem >= imagens.length){
        proximaImagem = 0;
    }

    //aqui está o truque para fazer com que as imagens que já passaram voltem para fora da área visível
    //o tempo de intervalo está aqui para que isso ocorra depois que a imagem ficou atrás da nova imagem da fila
    setTimeout(resetarImagens,500);
}

function resetarImagens(){
    imagemVisivel = proximaImagem -1;

    //se o índice alcançou o início da fila, voltar para o final
    if(imagemVisivel < 0){
        //o menos 1 está aqui pois o parâmetro length retorna o total de itens no array (no caso, 3)
        //precisamos da posição do último item do array (sempre é length-1)
        imagemVisivel = imagens.length - 1;
    }

    //retorna todas as imagens à sua posição original, menos a imagem visível
    for(var i = 0; i < imagens.length; i++){
        if(i != imagemVisivel){
            imagens[i].style.marginLeft = "100%";
        }
    }
}

var intervalo = setInterval(avancarImagem,2000);

I hope it will be useful in your learning.