JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://googledrive.com/host/0B3NxJ8CIAawZUGF2REt3Z0ctZlk"></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 = setInterval(slide, 1000);

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