使用jQuery each创建多个走马灯（carouFredSel），链接标识符问题

Question

我使用以下代码在一个页面上创建多个幻灯片。

幻灯片正常工作，但我无法让每个幻灯片的按钮起作用。当我点击它们时，页面就会滚动到顶部。我以为通过唯一地标识每个链接，我不应该有问题。

你有什么想法错在哪里了吗？

        $("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
    });

- rix

Answer 1

如果代码正确，则执行下一步。

<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>

jquery

$(".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"
    }
});

- tauruz

Answer 2

由于页面向上滚动，问题在于carouFredSel根本没有初始化分页器。很可能是你的标记问题。

我也遇到了一些奇怪的问题，使用responsive : true选项，就像你刚才描述的那样。

我创建了一个jsFiddle，展示了在jQuery选项卡UI中具有多个轮播的分页工作示例：

http://jsfiddle.net/EFC3X/

- Zachary Schuessler

---

我现在记不清上下文了，但你的代码明显在同一页上显示了2个旋转木马，并且即使删除选项卡也可以正常工作。我想寻找答案的人可以参考你的解决方案。谢谢。 - rix