Tips and Tricks: carouFredSel

Some Basics

Using with Bootstrap Grids

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

<!-- WILL NOT WORK ! -->
<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();
})

Enabling Swiping

You have to enable swiping-support in the component configuration (it's enabled by default):

$config['master_components']['gui-libraries.sliders.carouFredSel']['config'] = array(
    'swiping' => TRUE
);

Then you have to add the following to your JavaScript:

$(function(){
    $('#slideshow').carouFredSel({
	swipe:{
	    onTouch: true,
	}
    });
})

You can additionaly enable sliding by dragging with the mouse:

$(function(){
    $('#slideshow').carouFredSel({
	swipe:{
	    onTouch: true,
	    onMouse: true
	}
    });
})