JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <header>
             <h1>Simplest Sliding Image Slider</h1>

        </header>
        <div id="content">
            <div id="slider_container">
                <div id="slider">
                    <div class="slides" id="slide1">
                        <img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="">
                    </div>
                    <div class="slides" id="slide2">
                        <img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt="">
                    </div>
                    <div class="slides" id="slide3">
                        <img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
        <footer></footer>
    </div>

CSS

#wrapper, body {
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #9DECE8;
}
header {
    margin: 0 auto;
    width: 650px;
}
h1 {
    text-align: center;
    color: #CDC51D;
    font-size: 3vw;
}
#slider_container {
    width: 400px;
    overflow: hidden;
    margin: 50px auto;
}
#slider {
    width: 1300px;
    height: 200px;
}
.slides {
    height: 100%;
    position: relative;
    float: left;
}
.slides img {
    height: 200px;
    width: 400px;
}
.controls {
    position: absolute;
    top: 90px;
}
.controls a {
    position: absolute;
    display: block;
    width: 18px;
    height: 20px;
}
a.control_left {
    background: url('http://s2.postimg.org/gqp4dd7ed/arrow_left.png');
    left: 10px;
}
a.control_right {
    background: url('http://s2.postimg.org/4q3ocmzzp/arrow_right.png');
    left: 370px;
}

JavaScript

jQuery(document).ready(function ($) {

    // start slider function
    startSlider();

    // set width and step variables and add active class to first slider
    var slideWidth = $('.slides').width();
    $('#slide1').addClass('slides active');
    function resetInterval(){
            window.clearInterval(looper);
            looper = setInterval(autoSlide, 5000);
    }
    function autoSlide(){
            // remove and add class active
            $('.active').removeClass('active').next().addClass('active');

            // animation expression
            $('.active').animate({
                'left': '-=' + (slideWidth) + 'px'
            }, 500);
            $('.active').siblings().animate({
                'left': '-=' + (slideWidth) + 'px'
            }, 500);

            // return to first slide after the last one
            if ($('.active').length === 0) {
                $('#slide1').addClass('active');
                $('.slides').animate({
                    'left': 0
                }, 500);

            }
    }
    // actual function
    function startSlider() {

        looper = setInterval(autoSlide, 5000); // interval


        // adding controls
        $('.slides').append("<div class='controls'><a class='control_left' href='#'></a><a class='control_right' href='#'></a></div>");

        // remove unnecessary controlls on first and last slides
        $('.slides:nth-child(1) a.control_left').remove();
        $(".slides:nth-child(" + $('.slides').length + ") a.control_right").remove();

        // add functionality to controls
        $('.control_left').on('click', function () {
            resetInterval();
            $('.active').removeClass('active').prev().addClass('active');
            $('.active').animate({
                'left': '+=' + (slideWidth) + 'px'
            }, 500);
            $('.active').siblings().animate({
                'left': '+=' + (slideWidth) + 'px'
            }, 500);
        });

       ...