jquery插件caroufredsel隐藏next/prev按钮直到mouseover carousel

Joh*_*lia 1 jquery carousel caroufredsel

我试图默认隐藏按钮,它们只有在鼠标结束时才会显示.虽然我在旋转木马核心代码似乎添加了显示块的问题,即使我在CSS中设置了display none.

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();
});
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

raj*_*wat 7

在css中尝试这种方式

 .next{
    display:none !important;
  }

  .prev{
     display:none !important;
  }
Run Code Online (Sandbox Code Playgroud)