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

我不知道这是怎么回事，但是当我这样做时，分页子弹的数量就会增加一倍。在哪里我应该有TEN（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
    }
});

carouFredSel复制分页项目符号

1 个答案: