JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button" id="testNext">&raquo;</div>
<div class="button" id="testPrev">&laquo;</div>

<div id="test">
	<div id="imgs">
		<div class="img">
			<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/2000px-Flag_of_Portugal.svg.png">
		</div>
		<div class="img">
			<img src="http://www.mobal.com/blog/wp-content/uploads/2012/12/Brazil-Flag.png">
		</div>
		<div class="img">
			<img src="http://www.flaginstitute.org/wp/wp-content/flags/UNKG0001.png">
		</div>
		<div class="img">
			<img src="http://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg">
		</div>
	</div>
</div>

CSS

#test {
	width: 200px;
	height: 200px;
	border: 1px solid;
	font-size: 0;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}
#imgs {
	position: absolute;
	left: 0;
	top: 0;
}
.img {
	display: inline-block;
	width: 200px;
	height: 200px;
}
.img img {
	width: 200px;
}
.button {
	width: 20px;
	text-align: center;
	height: 20px;
	cursor: pointer;
}
#testNext {
	background-color: red;
}
#testPrev {
	background-color: coral;
}
.breadcumbs {
	width: 20px;
	height: 20px;
	cursor: pointer;
	background-color: green;
}

JavaScript

var numOfImages = $('#test .img').length;
var imgsWidth = $('#test .img').width();
var imgsWrapperWidth = numOfImages * imgsWidth;

for(var i=0; i<numOfImages;i++) {
	var slideNum = i+1;
	$('#testPrev').after('<div class="breadcumbs" data-slide="' +slideNum+ '">' +slideNum+ '</div>');
}

$('#imgs').width(imgsWrapperWidth);

$(document).on('click', '#testNext', function(){

	var position = parseInt($('#imgs').css("left"));

	if(position-imgsWidth <= -imgsWrapperWidth) {
		$('#imgs').stop().animate({
			"left": 0
		});
	}
	else {
		$('#imgs').stop().animate({
			"left": position-imgsWidth+ 'px'
		});
	}
});

$(document).on('click', '#testPrev', function() {

	var position = parseInt($('#imgs').css("left"));

	if(position === 0) {
		$('#imgs').stop().animate({
			"left": -imgsWrapperWidth+imgsWidth
		});
	}
	else {
		$('#imgs').stop().animate({
			"left": position + imgsWidth+ 'px'
		});
	}
});

$(document).on('click', '.breadcumbs', function() {

	var position = parseInt($('#imgs').css("left"));
	var hey = (parseInt($(this).attr('data-slide')))-1;

	$('#imgs').stop().animate({
		"left": -(imgsWidth*hey)
	});

});