JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://coolcarousels.frebsite.nl/js/jquery.carouFredSel.js"></script>
	<div class="main-content">
		<ul id="carousel">
            <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
                <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
                <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
                    <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li>
		</ul>
		<div class="clearfix"></div>
	</div>

CSS

#intro {
				width: 580px;
				margin: 0 auto;
			}
			.wrapper {
				background-color: white;
				width: 480px;
				margin: 40px auto;
				padding: 50px;
				box-shadow: 0 0 5px #999;
			}
			#carousel img {
				display: block;
				float: left;
			}
			.main-content ul {
				margin: 0;
				padding: 0;
				list-style: none;
				display: block;
			}
			.main-content li {
				display: block;
				float: left;
			}
			.main-content li img {
				margin: 0 20px 0 20px;
			}
			.list_carousel.responsive {
				width: auto;
				margin-left: 0;
			}
			.clearfix {
				float: none;
				clear: both;
			}
			.prev {
				float: left;
				margin-left: 10px;
			}
			.next {
				float: right;
				margin-right: 10px;
			}
			.pager {
				float: left;
				width: 300px;
				text-align: center;
			}
			.pager a {
				margin: 0 5px;
				text-decoration: none;
			}
			.pager a.selected {
				text-decoration: underline;
			}
			.timer {
				background-color: #999;
				height: 6px;
				width: 0px;
			}

JavaScript

$(function() {
		$('#carousel').carouFredSel({
			width: '100%',
			items: {
				visible: 3,
				start: -1
			},
			scroll: {
				items: 1,
				duration: 1000,
				timeoutDuration: 3000
			},
			prev: '#prev',
			next: '#next',
			pagination: {
				container: '#pager',
				deviation: 1
			}
		});
	});