页面每次动态获取数据生成 slide 的个数,可以加下面两个参数。
var mySwiper = new Swiper('.swiper-container', {
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper ;
});
如果有左右切换按钮,想在第一页和最后一页隐藏上一个和下一个按钮。
var mySwiper = new Swiper('.swiper-container', {
on: {
slideChangeTransitionEnd: function() {
//alert(this.activeIndex); //切换结束时,告诉我现在是第几个slide
if (this.activeIndex === 0) {
$('.prev').hide();
} else {
$('.prev').show();
}
//3 就是最后一页,你有几页就填对应几数字
if (this.activeIndex === 3) {
$('.next').hide();
} else {
$('.next').show();
}
},
},
});
如果切换内容的长度不一致
var mySwiper = new Swiper('.swiper-container', {
autoHeight: true,
})
如果切换内容要可点击
var mySwiper = new Swiper('.swiper-container', {
preventClicks: false
})
如果页面切换几十个,dom 撑不住,可以使用虚拟 Dom
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
virtual: {
slides: (function () {
var slides = [
` `,
` `,
``,
``,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
];
return slides;
}()),
},
});