Flexslider传送带中的动态添加幻灯片 [英] Dynamic add slide in flexslider carousel

问题描述

HTML代码

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

jQuery代码

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

Here I append div dynamically in flexslider. It append successfully but got Next and Previous button disabled.

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

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

My Question is how to add div dynamically in flexslider with proper working mode?

感谢您的帮助.

推荐答案

尝试以下代码:

工作演示

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

这篇关于Flexslider传送带中的动态添加幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！