JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image-slider">
    <div id="images">
        <img src="http://www.phlmetropolis.com/Cats.jpg" />
        <img src="http://25.media.tumblr.com/tumblr_mbuypt8R0M1ri87b4o1_1280.jpg" />
        <img src="http://us.123rf.com/400wm/400/400/anobis/anobis0908/anobis090800041/5357058-young-abyssinian-cat-in-action.jpg" />
    </div>
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

CSS

#image-slider {
    position:relative;
    width:400px;
    height:400px;
    border:1px solid black;
    overflow:hidden;
}
img {
    position:absolute;
    height:400px;
}
#images {
    position:absolute;
}

JavaScript

var images = $('#images').children('img');
var xpos = 0;
var imageXPos = [0]; //create array of x positions for images, first = 0
for (var i = 1; i < images.length; ++i) { //skip the first image since it's xpos = 0
    xpos += $(images[i-1]).width(); //increment the xpos variable by the previous image width
    imageXPos.push(xpos); //push this onto the array
    //move the current image's x position so all images are lined up in a single row
    //$(images[i]).css('left', xpos + 'px');
    //optional
    //center the images in the slider frame
    var image = $(images[i]);
    if (image.width() > 400) {
        image.css('left', xpos - ((image.width() - 400) / 2) + 'px');
    }
}

var index = 0;
$('#prev').click(function (e) {
    index--;
    if (index < 0) index = 0;
    $('#images').stop().animate({'left':'-' + imageXPos[index] + 'px'}, 200);
});
$('#next').click(function (e) {
    index++;
    if (index == images.length) index = images.length - 1;
    $('#images').stop().animate({'left':'-' + imageXPos[index] + 'px'}, 200);
});