在 flexslider 轮播中动态添加幻灯片 [英] Dynamic add slide in flexslider carousel
本文介绍了在 flexslider 轮播中动态添加幻灯片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
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屋!
查看全文