carouFredSel Duplicating Pagination Bullets

Question

I'm setting up a simple carouFredSel and I'm getting a weird effect.

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

I have no idea how this is happening, but when I run this, the number of pagination bullets are doubling. Where I should have TEN (10), I now have TWENTY (20).

I do have other carouFredSels on the page, but I removed them prior to posting this question to see if MAYBE somehow the streams of code where getting crossed, but that is not the issue. When this carousel is on the page all by itself, the number of bullets are being duplicated.

Any ideas?

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