jquery插件caroufredsel隐藏next/prev按钮，直到mouseover旋转木马

我想使按钮隐藏默认情况下，他们只有当鼠标结束时可见。尽管我在旋转木马核心代码似乎正在添加显示块的问题上存在问题，即使我在CSS中设置为无显示。jquery插件caroufredsel隐藏next/prev按钮，直到mouseover旋转木马

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>

来源

2012-10-25 John Magnolia

你能告诉我们插件代码吗？ – freebird

它的4314行长，所以也许最好你从下载它：http://caroufredsel.dev7studios.com/ –

你看到自定义事件部分，也许它可以帮助吗？ – freebird

尝试这种方式的CSS

.next{ 
    display:none !important; 
    } 

    .prev{ 
    display:none !important; 
    }

来源

2012-11-03 05:44:43

该插件是使用子画面的过渡效果。我认为快速解决方案是Photoshop按钮来降低不透明度。

来源

2012-10-31 16:59:07 Leslie

确保最新的样式属性（即最远的记在你的HTML）是那些设置可见不了了之。添加到标签上的样式选项是我认为最重要的。尝试添加以下到您的标记：

<tag style="visible:0;" ></tag>

如果这个工程，那么你知道这是你的问题，这可能工作作为解决方案的的JavaScript后可能会改变风格的鼠标为例。

如果你的所有包含都在标题中，那么将CSS样式表（将可见性设置为无）设置为可以提供帮助，但是如果JavaScript包含在页面底部，则可能有编辑JavaScript或移动它。

来源

2012-11-01 04:41:59

你可以尝试修改配置。我将display: none,添加到您的代码中。我还没有测试过它。

$slides.find('ul.banners').eq(0).carouFredSel({ 
    height: 360, 
    items: { 
     visible: 1 
    }, 
    scroll: { 
     easing: "easeInOutSine", 
     duration: 1200 
    }, 
    auto: { 
     delay: 1000 
    }, 
    prev: { 
     display: none, 
     button: $slides.find('.prev'), 
     items: 1 
    },    
    next:{ 
     display: none, 
     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>'; 
     } 
    } 
});

您的CSS样式表是否包含在插件之后？插件执行后，您可以尝试通过CSS和/或jquery/javascript重写。

来源

2012-11-05 08:20:45 jhoanna

试试下面的一段代码：

$("#layout-main").hover(
    function(){ 
     $(".prev").fadeIn(500); 
     $(".next").fadeIn(500); 
     $(".pagination a").fadeIn(500); 
    }, function(){ 
     $(".prev").fadeOut(500); 
     $(".next").fadeOut(500); 
     $(".pagination a").fadeOut(500); 
    } 
);

来源

2013-09-11 15:36:53

使用的CSS文件这个简单的代码。

.carousel .carousel-control {visibility：hidden; } .carousel：hover .carousel-control {visibility：visible; }

来源

2014-12-08 04:29:31

jquery插件caroufredsel隐藏next/prev按钮，直到mouseover旋转木马

回答

相关问题