swiper 动态加载数据

2019独角兽企业重金招聘Python工程师标准>>>

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
            }
        }
    });

 

 

 

转载于:https://my.oschina.net/qingqingdego/blog/2873941