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/ - 结果 => 无限次单击