I am trying to make the buttons hide by default and they only become visible when the mouse is over. Although I am having problems where the carousel core code seems to be adding display block even if I set display none in the CSS.
var $slides = $("#slides");
$slides.find('ul.banners').eq(0).carouFredSel({
height: 360,
items: {
visible: 1
},
scroll: {
easing: "easeInOutSine",
duration: 1200
},
auto: {
delay: 1000
},
prev: {
button: $slides.find('.prev'),
items: 1
},
next:{
button: $slides.find('.next'),
items: 1
},
pagination: {
container: $slides.find(".pagination"),
keys: true,
anchorBuilder: function(nr) {
return '<li><a href="#"><span>'+nr+'</span></a></li>';
}
}
});
$slideButtons = $slides.find(".next,.prev");
$slides.find('ul.banners').hover(function(){
$slideButtons.fadeIn();
},function(){
$slideButtons.fadeOut();
});
HTML
<div id="slides">
<ul class="banners">
<li><img /></li>
<li><img /></li>
</ul>
<ul class="pagination"></ul>
<div class="next">Next</div>
<div class="prev">Previous</div>
</div>
