JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<label id = "atras">Atrás</label>
<label id = "adelante">Adelante</label>

CSS

*{
    transition: all ease .75s;
}

label{
    cursor: pointer;
    background: lightcyan;
    color: navy;
    font-size: 2em;
    border-radius: .5em;
}

label:nth-child(1){
    float: left;
}

label:nth-child(2){
    float: right;
}

label:active{
    background: navy;
    color: lightcyan;
}

JavaScript

var imagenes = ["http://2.bp.blogspot.com/-8NdWPj5NIZY/TnNrI_9HWDI/AAAAAAAANLc/rvz9Yrc0eZo/s1600/mexico-escapada-paisaje-lagos-lagunas-destinos-rios-sol-horizonte.jpg", "http://2.bp.blogspot.com/-OSVC5PTEAKU/TZNnUHaoJZI/AAAAAAAAApo/WcP3qSUPAoo/s1600/monta%2525C3%2525B1as%252520verdes%255B1%255D.jpg", "http://4.bp.blogspot.com/-6VJvyOXvu0o/TwtELEPywRI/AAAAAAAAA2c/lcnmWNT9dNI/s1600/paisajes480.jpg", "http://www.fotosyfondos.com/wp-content/uploads/2011/05/Paisajes-Bonitos.jpg", "http://2.bp.blogspot.com/_voQ8IM9pe9s/TSuCoNZHG9I/AAAAAAAAAwY/Gf_RDX0RCOU/s1600/PAISAJES_HERMOSOS2%255B1%255D.jpg"],
    total = imagenes.length,
    contador = 0,
    atras = document.getElementById("atras"),
    adelante = document.getElementById("adelante");

atras.addEventListener("click", function(){
    contador = contador === 0 ? total - 1 : --contador;
    document.body.style.opacity = 0;
    document.body.style.background = "url(" + imagenes[contador] + ") no-repeat fixed center";
    document.body.style.backgroundSize = "cover";
    document.body.style.opacity = 1;
}, false);

adelante.addEventListener("click", function(){
    contador = contador == total - 1 ? 0 : ++contador;
    document.body.style.opacity = 0;
    document.body.style.background = "url(" + imagenes[contador] + ") no-repeat fixed center";
    document.body.style.backgroundSize = "cover";
    document.body.style.opacity = 1;
}, false);

document.body.style.background = "url(" + imagenes[contador] + ") no-repeat fixed center";
document.body.style.backgroundSize = "cover";