jquery plugin caroufredsel hide next/prev buttons until mouseover carousel

Question

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>

Answer 1

try this way in css

 .next{
    display:none !important;
  }

  .prev{
     display:none !important;
  }