CarouFredSel Separator
HTML
<script src="http://coolcarousels.frebsite.nl/js/jquery.carouFredSel.js"></script>
<script src="http://cdn.oomta.com/js/jquery/touchswipe/1.3.3/jquery.touchSwipe.min.js"></script>
<div id="content">
<div class="list_carousel">
<ul id="foo2">
<li>
<p>Filler Text.</p>
</li>
<li>
<p>Filler Text 2.</p>
</li>
<li>
<p>Filler Text 3.</p>
</li>
<li>
<p>Filler Text 4.</p>
</li>
</ul>
<div class="clearfix"></div> <a class="prev" id="prev2" href="#"><<<span>prev</span></a>
<a class="next" id="next2" href="#">>><span>next</span></a>
</div>
</div>
CSS
.list_carousel ul { margin: 0; padding: 0; list-style: none; display: block;}
.list_carousel li { font-size: 14px; color: #333; width: 100%; padding: 20px; margin: 2px; display: block; border: dashed; float:left;}
.list_carousel.responsive { width: auto; margin-left: 0;}
.list_carousel .clearfix { float: none; clear: both;}
.list_carousel a.prev { background: #FF4B33; display: block; padding: 10% 0; position: fixed; top: 20%; left: 10px; z-index: 9999;}
.list_carousel a.next { background: #FF4B33; display: block; position: fixed; padding: 10% 0; right: 10px; top: 20%; z-index: 9999;}
.list_carousel a.prev.disabled, a.next.disabled { cursor: default;}
.list_carousel a.prev span, a.next span { display: none;}
#content .list_carousel .caroufredsel_wrapper { margin: 0 auto !important; left: 0 !important;}
/**/
#foo2 li {float: left;}
JavaScript
$(document).ready(function() {
$("#foo2").carouFredSel({
auto: false,
circular: true,
infinite: true,
responsive: true,
direction: "left",
width: null, // automatically calculated
height: null, // automatically calculated
align: "center",
items: {
visible: 1,
start: "random"
},
prev: {
button : "#prev2"
},
next: {
button : "#next2"
},
scroll: {
fx: "crossfade",
pauseonhover: true
},
auto: 3000
});
});