JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fredhq.com//assets/projects/roundabout2/demos/demos.css">
<script src="http://fredhq.com/lib/js/projects/roundabout/jquery.roundabout2.js"></script>
<ul>
			<li><img src="http://fredhq.com/assets/projects/roundabout2/demos/images/img/award.png" alt="Award" /></li>
			<li><img src="http://fredhq.com/projects/roundabout2/demos/images/img/backpack.png" alt="Backpack" /></li>
			<li><img src="http://fredhq.com/assets/projects/roundabout2/demos/images/img//bear.png" alt="Bear" /></li>
			<li><img src="http://fredhq.com/assets/projects/roundabout2/demos/images/img/gun.png" alt="Gun" /></li>
			<li><img src="http://fredhq.com/assets/projects/roundabout2/demos/images/img/high-five.png" alt="High-Five" /></li>
			<li><img src="http://fredhq.com/assets/projects/roundabout2/demos/images/img/mustache.png" alt="Mustache" /></li>
			<li><img src="http://fredhq.com/assets/projects/roundabout2/demos/images/img/sun.png" alt="Sun" /></li>
		</ul>

	<div class="interact">
			<a href="#" class="previous">Previous</a>
			<a href="#" class="start">Start</a>
			<a href="#" class="stop">Stop</a>
			<a href="#" class="toggle">Toggle</a>
			<a href="#" class="next">Next</a>
		</div>

CSS

ul {list-style: none; padding: 0;	margin: 0 auto;	width: 500px; height: 150px;
}

li {height: 8em; width: 8em;text-align: center;cursor: pointer; background-color:yellow;
}

li img {width: 100%;}

li.roundabout-in-focus {cursor: default;}

JavaScript

/* roundabout */

$(document).ready(function() {
				$('ul').roundabout({
					tilt:-4,
					minOpacity: 1,
					minScale: 0.1,
					autoplay: true,
					autoplayDuration: 3000,
					autoplayPauseOnHover: true,
					btnStartAutoplay: ".start",
        			btnStopAutoplay: ".stop",
         			btnToggleAutoplay: ".toggle",
					btnNext: ".next",
					btnPrev: ".previous"
				});
			});