javascript - carouFredSel 复制分页项目符号

Question

我正在设置一个简单的 carouFredSel，并且得到了奇怪的效果。

HTML:

<div class="list_carousel responsive banners">
    <ul id="foo2">
        <li><a href="#"> <img src="1.jpg"></li>
        <li><a href="#"> <img src="2.jpg"></li>
        <li><a href="#"> <img src="3.jpg"></li>
        <li><a href="#"> <img src="4.jpg"></li>
        <li><a href="#"> <img src="5.jpg"></li>
        <li><a href="#"> <img src="6.jpg"></li>
        <li><a href="#"> <img src="7.jpg"></li>
        <li><a href="#"> <img src="8.jpg"></li>
        <li><a href="#"> <img src="9.jpg"></li>
        <li><a href="#"> <img src="10.jpg"></li>
    </ul>
    <div class="clearfix"></div>
    <a id="prev-banner" class="prev" href="#">&lt;</a>
    <a id="next-banner" class="next" href="#">&gt;</a>
    <div id="pager-banner"></div>
</div>

jQuery:

$("#foo2").carouFredSel({
            align: 'left',
            responsive: true,
            width: 690,
            height: 198,
            items: {
                start: -1,
                visible: 1,
                width: 690,
                height: 198
            },
            scroll: {
                items: 1,
                duration: 1000,
                fx: 'crossfade'
            },
            auto: true,
            swipe: {
                onTouch     : true,
                onMouse     : true
            },
            prev: {
                button: "#prev-banner",
                key: "left"
            },
            next: {
                button: "#next-banner",
                key: "right"
            },
            pagination  : {
                container       : "#pager-banner",
                anchorBuilder   : function( nr ) {
                    return "<a href='#'><i class='fa fa-circle-o'></i></a>";
                }
            }
        });

我不知道这是怎么发生的，但是当我运行这个时，分页项目符号的数量增加了一倍。我应该有十 (10) 个，现在有二十 (20) 个。

我的页面上确实有其他 carouFredSels，但我在发布此问题之前删除了它们，以查看代码流是否可能以某种方式交叉，但这不是问题。当此轮播单独出现在页面上时，项目符号的数量会重复。

有什么想法吗？

Answer 1

$('#foo2').carouFredSel({
    items: 1,
    responsive: true,
    direction: "left",
    scroll: {
        items: 1,
        easing: "elastic",
        duration: 500,
        pauseOnHover: true
    },
    items: {
        visible: {
            min: 1,
            max: 1,
        }
    },
    prev: '#prev-banner',
    next: '#next-banner',
    pagination: {
        container: '.sliderpager',
        anchorBuilder: false // remove default rendering
    }
});