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();
})