在 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?

感谢您的帮助.

推荐答案

试试这个代码:

工作演示

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屋！