Tips and Tricks: carouFredSel
Some Basics
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>
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();
})
})
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>