CarouFredSel动态添加内容

Question

我尝试将内容动态添加到CarouFredSel滑块中。内容插入得很好，但是CourFredSel不识别新内容。有没有办法告诉滑块，滑块的数量已经改变了？

jQuery(document).ready(function() {
    jQuery('#carousel').carouFredSel({
        items: 4,
        direction: "left",
        responsive: true,
        infinite: false,
        circular: false,
        scroll: {
            items: 2,
            duration: 1000
        },
        next: {
            button: "#slider-button-next",
            key: "right",
            onBefore: function () {
                loadAdditionalContent();
            }
        },
        prev: {
            button: "#slider-button-prev",
            key: "left"
        },
        auto: {
            play: false
        }
    });
});

function loadAdditionalContent () {
    jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" />']);
}

下面是一个描述问题的小提琴：http://jsfiddle.net/bg0xyj8k/

Answer 1

您的代码没有任何问题：

修正jsfidle中的问题:使用外部引用而不带https：http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js

​

​

我对您的代码做了一些更改，不了解您想在那里做什么。

jQuery( "#slider-add-items" ).click(function() {
  loadAdditionalContent();
});

function loadAdditionalContent () {
    id++;
    jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" id="'+ id +'" />']);
}

http://jsfiddle.net/bg0xyj8k/2/

更新-当你问问题时要更精确

FIX 1:下一次单击“第一个可见元素”之前插入- http://jsfiddle.net/bg0xyj8k/3/

修正2:当下一次单击滑块时插入滑块的最后位置- http://jsfiddle.net/bg0xyj8k/4/ - =>无限下一次单击