JSFiddle - React, Tailwind, and code Playground

HTML

<div this="slider" images="
    http://i.imgur.com/WopWRMH.jpg,
    http://i.imgur.com/YnK2Lz5.jpg,
    http://i.imgur.com/yOUowDb.gif
">
    <div width="200" height="200" this="container"></div>
    <span this="back">Voltar</span>
    <span this="next">Avançar</span>
</div>

JavaScript

(function(){
    var $ = "querySelector";
    var slider = document[$]("*[this='slider']"),
        container = slider[$]("*[this='container']"),
        buttonBack = slider[$]("*[this='back']"),
        buttonNext = slider[$]("*[this='next']"),
        images = slider.getAttribute("images").replace(/[ \n]/gi,"").split(","),
        totalImages = images.length;
    container.style.width = container.getAttribute("width")+"px";
    container.style.height = container.getAttribute("height")+"px";
    var pai = document.createElement("div");
    pai.style.width = (container.getAttribute("width") * totalImages)+"px";
    for(var i=0;i<totalImages;i++){
        var thisImage=document.createElement("div");
        thisImage.style.width = container.getAttribute("width")+"px";
        thisImage.style.height = container.getAttribute("height")+"px";
        thisImage.style.backgroundImage = "url("+images[i]+")";
        thisImage.style.backgroundSize = "contain";
        thisImage.style.float = "left";
        thisImage.style.backgroundPosition = "center center";
        thisImage.style.backgroundRepeat = "no-repeat";
        pai.appendChild(thisImage);
    }
    container.appendChild(pai);
    container.style.overflow = "hidden";
    var atual=0;
    buttonNext.onclick = function(e){
        atual++;
        atual = (atual%totalImages);
        pai.style.marginLeft = -(atual * container.getAttribute("width"))+"px";
    }
    buttonBack.onclick = function(e){
        atual--;
        if(atual < 0) atual = (totalImages-1);
        pai.style.marginLeft = -(atual * container.getAttribute("width"))+"px";
    }
    setInterval(function(){
        buttonNext.click();
    }, 4000);
})();