Tips and Tricks: carouFredSel

Some Basics

Using with Bootstrap Grids

Do not convert a Bootstrap Grid-Div into a CarouFredSel-Slider:

	<div class="col-xs-8" id="slideshow">
	    <img src="assets/img/1.jpg" width="663" height="491">
	    <img src="assets/img/2.jpg" width="663" height="491">
	    <img src="assets/img/3.jpg" width="663" height="491">
	    <img src="assets/img/4.jpg" width="663" height="491">
	</div>

This will break the Grid Layout. Use instead an own Div for the Slideshow:

	<div class="col-xs-8">
		<div id="slideshow">
		    <img src="assets/img/1.jpg" width="663" height="491">
		    <img src="assets/img/2.jpg" width="663" height="491">
		    <img src="assets/img/3.jpg" width="663" height="491">
		    <img src="assets/img/4.jpg" width="663" height="491">
		</div>
	</div>

Simple Slider

HTML:

	<div id="slideshow">
	    <img src="assets/img/1.jpg" width="663" height="491">
	    <img src="assets/img/2.jpg" width="663" height="491">
	    <img src="assets/img/3.jpg" width="663" height="491">
	    <img src="assets/img/4.jpg" width="663" height="491">
	</div>

JS:

	$(function(){
	    $('#slideshow').carouFredSel();
	})