使用jquery的多个转盘(carouFredSel),每个转盘都有链接标识符问题
我使用下面的代码在一个页面上创建多个幻灯片 幻灯片效果很好,但我无法让每个幻灯片的各个按钮都正常工作。当我点击它们时,页面只会滚动到顶部。我认为通过唯一地识别每个链接,我不应该有问题 你知道怎么了吗使用jquery的多个转盘(carouFredSel),每个转盘都有链接标识符问题,jquery,carousel,Jquery,Carousel,我使用下面的代码在一个页面上创建多个幻灯片 幻灯片效果很好,但我无法让每个幻灯片的各个按钮都正常工作。当我点击它们时,页面只会滚动到顶部。我认为通过唯一地识别每个链接,我不应该有问题 你知道怎么了吗 $("div.slideshow").each(function(){ $(this).find('ul').carouFredSel ({ auto:true, items: { wi
$("div.slideshow").each(function(){
$(this).find('ul').carouFredSel
({
auto:true,
items: { width: 200, height: 200 },
prev: { button: function() { return $(this).find('a.prev');}},
next: { button: function() { return $(this).find('a.next'); }},
});
console.log( $(this).find('a.prev') ); //correct element returned, length 1
console.log($(this)); //correct element returned
});
由于页面滚动到顶部,问题在于carouFredSel根本没有初始化寻呼机。很可能是您的标记有问题 我在使用
responsive:true
选项时也遇到了一些奇怪的问题,正如您刚才描述的那样
我创建了一个JSFIDLE,以展示在jQuery选项卡UI中使用多个转盘分页的工作示例:
如果代码为“下一步”
<div class="image_carousel">
<div class="sec_elem">
<div class="tem-bl">
<img src="image.jpg" alt=""/>
</div>
<div class="tem-bl">
<img src="image.jpg" alt=""/>
</div>
<div class="tem-bl">
<img src="image.jpg" alt=""/>
</div>
</div>
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>
我现在记不起上下文了,但您的代码清楚地显示了同一页面上的两个旋转木马,即使您删除了选项卡,也可以正常工作。我想人们在寻找答案时最好看看你的解决方案。谢谢
$(".sec_elem").carouFredSel({
circular: true,
infinite: false,
width:'100%',
auto : true,
scroll : {
items : 1,
pauseOnHover : true,
duration : 1000
},
prev : {
button : function(){
return $(this).parents('.image_carousel').find('.prev');
},
key : "left"
},
next : {
button : function(){
return $(this).parents('.image_carousel').find('.next');
},
key : "right"
}
});