Question

HTML代码

<div class="flexslider carousel mtop20">
    <ul class="slides col-md-12" id="div_portion">
    </ul>
</div>

jQuery代码

这里我在flexslider中动态附加div。它成功追加，但禁用了下一个和上一个按钮。

$div = "<li> Content here </li>";
$("#div_portion").append($div);
slider = $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth : 210,
    itemMargin: 5,
    minItems: 1
  });

我的问题是如何在flexslider中以适当的工作模式动态添加div？

感谢您的帮助。

Answer 1

试试这段代码：

<强> Working Demo

HTML

<div id="slider" class="flexslider carousel mtop20">
    <ul class="slides col-md-12" id="div_portion">
    </ul>
</div>
<a id="add" href="javascript:void(0);">Add</a>

JS

$('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
});

$("#add").click(function(){
    div = "<li> How are you</li>";
    $('#slider').data('flexslider').addSlide($(div));

});

// Custom stuff
var saved1;
saved1 = $('<li>Hello</li>');
$('#slider').data('flexslider').addSlide($(saved1));
saved1 = $('<li>World</li>');
$('#slider').data('flexslider').addSlide($(saved1));

Answer 2

 $('#slider').data('flexslider').addSlide(ListItem);  
 $('#carousel').data('flexslider').addSlide(ListItem);

这两项都有效。如果您对图像文件数据使用byte []，则需要在后面的代码中将图像转换为Convert.ToBase64String。然后在src中，src =＆＃39; data：image / png; base64，＆＃39; + theNameOfYourByteStream。

当轮播或滑块中没有listItem时，它们都不会起作用。在向列表项添加＆gt; img后，您需要初始化滑块和轮播。

$('#nameOfYour<ul>').append(<li><img></li>)

然后你需要运行flexslider的初始化

    var carousel = $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider'
    });

flexslider的功能相同，但放大或关注＆＃34;滑块＆＃34;中的图像。当您点击＆＃34; carousel＆＃34;中的新幻灯片时，无法使用新幻灯片。

未发生点击焦点事件的jsFiddle已存在。 http://jsfiddle.net/XXzpW/5/

// From example page:
$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 100,
    itemMargin: 5,
    asNavFor: '#slider'
});

$('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
});

// Custom stuff
var saved1;
var saved2;

function removeRose() {
    saved1 = $('#carousel').find('.rose');
    saved2 = $('#slider').find('.rose');
    $('#carousel').data('flexslider').removeSlide($('.rose'));
    $('#slider').data('flexslider').removeSlide($('.rose'));
};

function addRose() {
    $('#carousel').data('flexslider').addSlide(saved1);
    $('#slider').data('flexslider').addSlide($(saved2));
};

$('#menu').on('click', 'li:first', function () {
    removeRose();
});

$('#menu').on('click', 'li:last', function () {
    addRose();
});

在flexslider轮播中动态添加幻灯片

2 个答案: