swiper 动态加载数据使用说明
进行动态数据加载,如果按照一般的静态文件方式进行设置则会发现无法正常滑动,
原因可能是swiper在初始化的时候会扫描swiper-wrapper内部swiper-slide的个数,从而完成初始化,但是由于动态加载是在初始化完成进行的操作,所以无法确定swiper-wrapper内部swiper-slide的个数,从而导致左右滑动失效
如果是动态DOM添加初始化
方式一
initialSlide :0, //轮播开始位置
observer:true, //轮播元素为内部动态添加必须加此 修改swiper自己或子元素时,自动初始化swiper
observeParents:true, //轮播元素为内部动态添加必须加此 修改swiper的父元素时,自动初始化swiper
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.fenye04',
clickable: true,
},
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: true,
}
方式二
/** 添加DOM
var tdom=document.getElementById("xxx");
tdom.innerText='xxxxx';
然后重新初始化swoper
var swiper = new Swiper('.swiper-container', {
slidesPerView : 3
});
*/
常用参数说明:
var swiper = new Swiper(".news",{ //绑定置顶容器class
pagination: ".news_lis",//分页clss(就是下面小圆点的容器)
paginationClickable: true,//点击分页圆点是否切换
slidesPerView: 4,//每页显示几个
spaceBetween: 20,//每个间距是多少
nextButton: ".news-next",//绑定下一个按钮容器的class
prevButton: ".news-prev",//绑定上一个按钮容器的class
autoplay: 3000,//设置多少毫秒会执行一次动画(可以理解为:翻页 / 切换)
centeredSlides: false//值为【false】时左对齐,默认就是左对齐,值为【true】时居中对齐
breakpoints: { //响应布局设置
1200: {//如果屏幕宽度小于<1200
slidesPerView: 3,//每页显示3个
spaceBetween: 20//每个间距是20
},
1024: {
slidesPerView: 3,
spaceBetween: 20
},
768: {
slidesPerView: 2,
spaceBetween: 20
},
640: {//如果屏幕宽度小于<640
slidesPerView: 1,//每页显示1个
spaceBetween: 10//每个间距是10
}
}
});