flexslider2 怎么实现动态加载 Slide 呢？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2017 天前的主题，其中的信息可能已经有所发展或是发生改变。

想实现通过获取后台数据，然后动态的加载到<ul>里面

<div class="flexslider">
        <ul class="slides" id="side-main">

        </ul>
</div>

要动态添加的<li>块

var slideDiv ='<li style="background-image: url(style/img/img_bg_1.jpg);">...</li>';

post 方法：

$.post(url, function(data){
            $(data).each(function(i,n) {
               ...
            });
},"json");

但是在调用 post 方法之后，按照网上介绍的调用

$('.flexslider').data('flexSlide').addSlide(slideDiv);

就得到了这个错误：

TypeError: $(...).data(...) is undefined

找了好多方法都没法实现，有人能告诉怎么实现吗?

2 条回复 • 2019-05-13 11:27:46 +08:00

ccraohng

2019-05-13 08:53:51 +08:00 via Android

不初始化吗

CandySky

2019-05-13 11:27:46 +08:00

@ccraohng 哇，终于有个大佬回我了，谢谢。我有进行初始化的，这个是初始化的代码：
$('#colorlib-hero .flexslider').flexslider({
animation: "fade",
slideshowSpeed: 5000,
directionNav: true,
start: function () {
setTimeout(function () {
$('.slider-text').removeClass('animated fadeInUp');
$('.flex-active-slide').find('.slider-text').addClass('animated fadeInUp');
}, 500);
},
before: function () {
setTimeout(function () {
$('.slider-text').removeClass('animated fadeInUp');
$('.flex-active-slide').find('.slider-text').addClass('animated fadeInUp');
}, 500);
}
});