JSFiddle - React, Tailwind, and code Playground

by selahssea

HTML

<script src="http://caroufredsel.dev7studios.com//js/jquery/jquery.carouFredSel-6.0.5-packed.js"></script>
<div class="image_carousel">
	<div id="foo2">
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
		<img src="http://caroufredsel.dev7studios.com//examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
	</div>
	<div class="clearfix"></div>
	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo2_next" href="#"><span>next</span></a>
	<div class="pagination" id="foo2_pag"></div>
</div>

CSS

.image_carousel {
	padding: 15px 0 15px 40px;
	position: relative;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
a.prev, a.next {
	background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) no-repeat transparent;
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 85px;
}
a.prev {			left: -22px;
					background-position: 0 0; }
a.prev:hover {		background-position: 0 -50px; }
a.prev.disabled {	background-position: 0 -100px !important;  }
a.next {			right: -22px;
					background-position: -50px 0; }
a.next:hover {		background-position: -50px -50px; }
a.next.disabled {	background-position: -50px -100px !important;  }
a.prev.disabled, a.next.disabled {
	cursor: default;
}

a.prev span, a.next span {
	display: none;
}
.pagination {
	text-align: center;
}
.pagination a {
	background: url(http://caroufredsel.dev7studios.com/images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
	width: 15px;
	height: 15px;
	margin: 0 5px 0 0;
	display: inline-block;
}
.pagination a.selected {
	background-position: -25px -300px;
	cursor: default;
}
.pagination a span {
	display: none;
}
.clearfix {
	float: none;
	clear: both;
}

JavaScript

$("#foo2").carouFredSel({
	circular: false,
	infinite: false,
	auto 	: false,
	prev	: {	
		button	: "#foo2_prev",
		key		: "left"
	},
	next	: { 
		button	: "#foo2_next",
		key		: "right"
	},
	pagination	: "#foo2_pag"
});