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

CONTROLLER:

$this->master->enable_component('gui-libraries.sliders.carouFredSel');

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

Add Previous / Next Buttons

Free Positioning

Add somewhere two div's for the next and the previous button. We use here the builtin icons of Bootstrap.

<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 id="slideshow_next"><span class="glyphicon glyphicon-chevron-right"></span></div>
<div id="slideshow_prev"><span class="glyphicon glyphicon-chevron-left"></span></div>

Tell carouFredSel to use the buttons and not to start automatically. Additionally we enable the use of the keyboard keys "right" and "left":

$(function(){
    $('#slideshow').carouFredSel({
	auto: false,
	prev:{
	    button:'#slideshow_prev',
	    key: 'left'
	},
	next:{
	    button:'#slideshow_next',
	    key:'right'
	},
	swipe:{
	    onTouch: true
	}
    });
})

Positioning inside the Slideshow

You have to wrap your slideshow and your buttons into a wrapping div. We use here the builtin icons of Bootstrap.

<div id="slideshow_wrapper">
   <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 id="slideshow_next"><span class="glyphicon glyphicon-chevron-right"></span></div>
   <div id="slideshow_prev"><span class="glyphicon glyphicon-chevron-left"></span></div>
</div>

Mixing the wrapper with the Bootstrap grid system is no problem:

<div class="col-xs-8" id="slideshow_wrapper">

Now positioning and style the buttons with css:

#slideshow_next {cursor:pointer; position:absolute; top:230px; color:white; font-size:31px;}
#slideshow_prev {cursor:pointer; position:absolute; top:230px; right:5px; color:white; font-size:31px;}

Use the same JavaScript as above:

$(function(){
    $('#slideshow').carouFredSel({
	auto: false,
	prev:{
	    button:'#slideshow_prev',
	    key: 'left'
	},
	next:{
	    button:'#slideshow_next',
	    key:'right'
	},
	swipe:{
	    onTouch: true
	}
    });
})

Show the Buttons only on Mouse-Over

There are two mthods doing this.

Simply CSS Method

The first and simply one is to add two additionally lines into your css:

#slideshow_next {cursor:pointer; position:absolute; top:230px; color:white; font-size:31px;}
#slideshow_prev {cursor:pointer; position:absolute; top:230px; right:5px; color:white; font-size:31px;}
#slideshow_wrapper:hover #slideshow_next,
#slideshow_wrapper:hover #slideshow_prev {display: block !important;}

And two additinally lines into your JavaScript:

$(function(){
    $('#slideshow').carouFredSel({
	auto: false,
	prev:{
	    button:'#slideshow_prev',
	    key: 'left'
	},
	next:{
	    button:'#slideshow_next',
	    key:'right'
	},
	swipe:{
	    onTouch: true
	}
    });
    $('#slideshow_prev').hide();
    $('#slideshow_next').hide();
})

This is because carouFredSel will always set "display:block" as element style of the buttons.

Fade In and Out

If you want fading the bvuttons, you do not have to add nothing to your css:

#slideshow_next {cursor:pointer; position:absolute; top:230px; color:white; font-size:31px;}
#slideshow_prev {cursor:pointer; position:absolute; top:230px; right:5px; color:white; font-size:31px;}

But add some more code into your JavaScript:

$(function(){
    $('#slideshow').carouFredSel({
	auto: false,
	prev:{
	    button:'#slideshow_prev',
	    key: 'left'
	},
	next:{
	    button:'#slideshow_next',
	    key:'right'
	},
	swipe:{
	    onTouch: true
	}
    });
    $('#slideshow_prev').hide();
    $('#slideshow_next').hide();
    $('#slideshow_wrapper').hover(function(){
	$('#slideshow_prev').fadeIn();
	$('#slideshow_next').fadeIn();
    },function(){
	$('#slideshow_prev').fadeOut();
	$('#slideshow_next').fadeOut();
    })
})

Use Icons for Navigation

First of all you have to set an id for every slide:

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

Then you have only set up the links with the icons. The only thing you have to do is setting the class to "caroufredsel" and the href to "#" followed by the id of the slide:

<a href="#slide1" class="caroufredsel"><img src="assets/img/icon1.jpg" width="162" height="119"></a>
<a href="#slide2" class="caroufredsel"><img src="assets/img/icon2.jpg" width="162" height="119"></a>
<a href="#slide3" class="caroufredsel"><img src="assets/img/icon3.jpg" width="162" height="119"></a>
<a href="#slide4" class="caroufredsel"><img src="assets/img/icon4.jpg" width="162" height="119"></a>