Tips and Tricks: carouFredSel

Some Basics

Init Carousel on Window Ready

The plugin might not be able to measure the correct size of the images onDocumentReady (mostly on Webkit browsers Chrome and Safari). Using $(window).load() eliminate this Problem:

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

Instead of:

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

Therefore you have to set the slideshow-div to "overflow:hidden" to prevent "Flash Of Unstyled Content" (F.O.U.C.)

Using with Bootstrap Grids

Do not convert a Bootstrap Grid-Div or Container-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>

<!-- WILL NOT WORK ! -->
<div class="container" 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 or the Container Behaviour. 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>

<div class="container">
   <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>

Sliding Divs

If you want to slide Div's instead images, you should pay attention to the following:

If you do not have a defined height for every slide, you should set "overflow:auto". Otherwise the height could be calculated wrong:

<div id="slideshow">
    <div style="overflow:auto;">
        <h1>Slide</h1>
        <p>Some Text on a Slide.</p>
    </div>
    <div style="overflow:auto;">
        <h1>Slide</h1>
        <p>Some Text on a Slide.</p>
    </div>
    <div style="overflow:auto;">
        <h1>Slide</h1>
        <p>Some Text on a Slide.</p>
    </div>
</div>

If you do not want to change the height of the slideshow dynamically, you have to set "height: auto" in the carouFredSel-Configuration. In this case you should float the sliding div's. Otherwise multiple div's will be shown vertically:

<div id="slideshow">
    <div style="float:left;">
        <h1>Slide</h1>
        <p>Some Text on a Slide.</p>
    </div>
    <div style="float:left;">
        <h1>Slide</h1>
        <p>Some Text on a Slide.</p>
    </div>
    <div style="float:left;">
        <h1>Slide</h1>
        <p>Some Text on a Slide.</p>
    </div>
</div>

$(window).load(function(){
   $('#slideshow').carouFredSel({
       items: 1,
       height: "auto"
   });
})

If you do not have a defined width for every slide, you should set the option "responsive: true" in the carouFredSel-Object. Otherwise the width could be calculated wrong:

$(window).load(function(){
   $('#slideshow').carouFredSel({
       items: 1,
       responsive: true,
   });
})

To my opinion the best effect for sliding div's is "cover-fade":

$(window).load(function(){
   $('#slideshow').carouFredSel({
       items: 1,
       responsive: true,
       scroll: {
	   fx: "cover-fade"
       }
   });
})

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:

$(window).load(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:

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

You can additionaly enable sliding by dragging with the mouse:

$(window).load(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":

$(window).load(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">

OR

<div class="container" id="slideshow_wrapper">

Now positioning and style the buttons with css:

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

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

$(window).load(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_wrapper:hover #slideshow_next,
#slideshow_wrapper:hover #slideshow_prev {display: block !important;}

And two additinally lines into your JavaScript:

$(window).load(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 more to your css. But add some more code into your JavaScript:

$(window).load(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>