
要轮播的数据是后端返回的,所以我们要发ajax请求接收数据;
下面演示的是已经接收回来的数据,动态创建div标签:
setTimeout(()=>{var list = ["aaa","bbb","ccc"]//后端返回的数据var newlist= list.map(item => `${item}`)var owrapper = document.querySelector(".swiper-wrapper")owrapper.innerHTML = newlist.join('')},2000)
完整代码:
Document
导航
结果:

动态创建完dom之后,发现刚刚放入的轮播效果都没了?
原因是创建dom是定时器,需要2s以后才能创建好,此时的swiper都初始化完了,没找的dom,所以原因是:swiper初始化过早;
解决办法:dom插入完之后,再new swiper;
就是把new swiper放到函数里面,在定时器里去调用:

代码:
Document
导航
结果:
你需要什么效果,就去 “在线演示-基础演示” 里去看效果,找到了点击 “右上角的在新窗口打开” ,然后右击“查看网页源代码”,去找,不认识代码的可以去API里搜是什么意思:

