JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
    <ul class="slides">
        <li class="slide s1">
            <img src="http://images.sodahead.com/polls/003788116/3146837591_face_of_jesus_01_0312_de_xlarge.jpeg">
        </li>
        <li class="slide s2">
            <img src="https://boutbenstyle.files.wordpress.com/2012/01/img-thing.jpg?w=490">
        </li>
        <li class="slide s3">
            <img src="http://www.barullo.com/4578-17076-large/disfraz-spiderman-musculoso-nio-caja.jpg">
        </li>
        <li class="slide s4">
            <img src="http://i.ebayimg.com/00/s/NTA1WDUwNQ==/z/C0IAAOSwFAZTvlWU/$_35.JPG">
        </li>
        <li class="slide s5">
            <img src="http://no-absurd.ru/uploads/posts/2013-06/1372491748_no-absurd-turgruppa-300.jpg">
        </li>
        <li class="slide s6">
            <img src="http://plimages.blob.core.windows.net/article-images/party_horn_image.jpg">
        </li>
        <li class="slide s7">
            <img src="http://2.bp.blogspot.com/-56L0AauS76A/TfTlnoFRJiI/AAAAAAAACgI/7dawgkcnoYs/s320/vagina-illustration.jpg">
        </li>
        <li class="slide s1">
            <img src="http://images.sodahead.com/polls/003788116/3146837591_face_of_jesus_01_0312_de_xlarge.jpeg">
        </li>
    </ul>
</div>

CSS

.slider {
    width:300px;
    overflow:hidden;
    margin:0 auto;
}
.slides {
    width:2500px;
    margin:0;
    padding:0;
}
.slide {
    list-style:none;
    float:left;
    width:300px;
    height:300px;
}

JavaScript

var current = 1;

function moveleft() {
    $(".slides").animate({
        "margin-left": "-=300"
    }, 1000, function () {
        current++;
        if (current == 8) {
            $(".slides").css("margin-left", 0);
            current = 1;
        }

    });
}

setInterval(moveleft, 2000);