JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/32360643/5-RaGEZONE/jquery.infinite-carousel.js"></script>
<div id="viewport">
<ul>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>	
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">6</a></li>    
</ul>
</div>
<div id="simplePrevious">Previous</div>
<div id="simpleNext">Next</div>

CSS

#viewport{
	width: 392px; /* Defines the size of the visible part of the carousel
		Attention : if you only want to see plain items in the viewport,
		the width of the viewport should take into account of :
		- the items width
		- the right and left padding of items
		- the number of items you want to see in the viewport
	 */
	overflow:hidden; /* Hides extra elements, those outside the viewport area */
	/* Fix for IE */
	position:relative;	
}
#viewport ul {
	position: relative; /* Enables positionning of elements inside viewport */
	padding: 0; /* Resets default - User Agent - style */
	margin: 0;
}
#viewport li {
    background: red;
	width: 98px; /* Defines the size of inner element */
	height: 78px;
	float: left; /* Places list items side by side*/
	list-style: none; /* Resets default - User Agent - style */
	display: inline-block;
	/* Cosmetic */
    margin:10px;
	padding: 0 0px;
	text-align:center;
}

/* Cosmetic */
#simplePrevious {
	width: 15px;
	height: 19px;
	cursor: pointer;
}

#simpleNext {
	width: 15px;
	height: 19px;
	cursor: pointer;		
}

JavaScript

jQuery(document).ready(function(){
	$('#viewport').carousel('#simplePrevious', '#simpleNext');
	
function slide(){
  $('#simpleNext').click();
}

var intervalId = window.setInterval(slide, 1000);

$('#viewport, #simplePrevious, #simpleNext').hover ( function(event) {
  if(event.originalEvent){
       window.clearInterval(intervalId);
  }
}, function() {
	window.setInterval(slide, 1000);
});

});