1.调用接口获取需要渲染的数据,根据返回的接口数据,渲染节点,紧接着在插入节点的后边调用步骤2编写的初始化方法
// 将数据加入节点后,插入父节点中
$('#swiper_demo').html(html);
// 动态加载完节点后,初始化轮播插件
swiper_init();
2.编写初始化swiper容器的方法,这是根据我自己项目需求编写的参数
// 初始化轮播插件
function swiper_init(){
var swiper = new Swiper('#swiper_demo .swiper-container', {
slidesPerView: 4, // 默认展示四张
spaceBetween: 42, // 每张图片的间隙
slidesPerGroup: 2,// 每次滑动轮播两张图片
loop: true, // 开启循环
autoplay:5000, // 每次滚动的时间间隙
autoplayDisableOnInteraction:false, // 用户操作后,继续循环
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next'
});
return swiper;
}