swiper这个插件应该很多人用,今天主要说获取当前滑动的值
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationType: 'fraction',
loop: true,
onSlideChangeEnd:function(swiper){
console.log('回调函数,swiper从一个slide过渡到另一个slide结束时执行')
}
});
当前滑动的值会受loop值影响
首先是loop值,默认:false
如果为true,则开启loop模式,会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的
swiper.activeIndex(返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数)
loop: false,
onSlideChangeEnd:function(swiper){
console.log('回调函数,swiper从一个slide过渡到另一个slide结束时执行')
console.log('测试loop:false时的值----',swiper.activeIndex)
}
当loop:true时,滑到第6个继续滑到第一个时 打印的值是7(返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数)
loop: true,
onSlideChangeEnd:function(swiper){
console.log('回调函数,swiper从一个slide过渡到另一个slide结束时执行')
console.log('测试loop:true时的值----',swiper.activeIndex)
}
this.active
this.active 在loop:false时取不到值,在true时,第一次加载取不到值,只有触发滑动一次才会有值,而且这种看着貌似没什么为题,但是倒着滑动,取到的值就有问题了
loop: true,
onSlideChangeEnd:function(swiper){
console.log('回调函数,swiper从一个slide过渡到另一个slide结束时执行')
console.log('测试loop:true时的值----',this.active)
}
页面第一次加载时没值
触发一次滑动后
this.realIndex
(当前活动块的索引,与activeIndex不同的是,在loop模式下不会将复制的块的数量计算在内。)
loop: true,
onSlideChangeEnd:function(swiper){
console.log('回调函数,swiper从一个slide过渡到另一个slide结束时执行')
console.log('测试loop:true时的值----',this.realIndex)
}
this.active = $('.swiper-slide-active').attr('data-swiper-slide-index') (可以完美获取loop:true下 前后滑动当前的滑动值)
loop: true,
onSlideChangeEnd:function(swiper){
this.active = $('.swiper-slide-active').attr('data-swiper-slide-index')
console.log('回调函数,swiper从一个slide过渡到另一个slide结束时执行')
console.log('测试loop:true时的值----',this.active)
console.log('加1的值---',Number(this.active)+1)
}
向前滑动和向后滑动值都没有问题,值是从0开始,要和页面的值对应上 就要加1
如果是4.多版本的,和3.版本不一样 (找了对应的api好像都没3.之前的详细,可以参照下面几个)
on_Swiper4 API文档 (这个api里面有回调)
let swiper = new Swiper('.swiper-container', {
autoplay:true,
loop: true,
pagination: { //页码 4.多版本页码可以显示具体数字
el: '.swiper-pagination',
type: 'fraction',
},
on:{//回调的方法写这里
slideChangeTransitionEnd:function(swiper){ //loop模式下当前滚动的索引
console.log('--',this.realIndex+1);
},
}
});
//或者直接
//swiper.on('slideChangeTransitionEnd', function () {
// console.log('slide changed',this.realIndex+1);
//});