Swiper Basic(基础参数) - watchSlidesProgress

Progress(进度、进程)分为swiper的progress 和每个slide单独的progress。
开启这个参数来计算每个slide的progress,Swiper的progress无需设置即开启。对于swiper的progress属性,活动的slide在最左(上)边时为0,活动的slide在最右(下)边时为1,其他情况平分。例:有6个slide,当活动的是第三个时swiper的progress属性是0.4,当活动的是第五个时swiper的progress属性是0.8。
对于slide的progress属性,活动块slide的progress为0,其他的依次减1。例:如果一共有6个slide,活动块slide是第三个,那么从第一个到第六个的progress属性分别是:2、1、0、-1、-2、-3。

progress值和swiper或slide的位置比例相关联,如果每个slide的宽度不同,pregress不一定会呈规则变化。当你设置了slidesPerView: 'auto'时需要注意这点。

watchSlidesProgress信息

类型:
boolean
默认:
false
举例:
true
启用版本:
4.0.0

效果演示

slider1
slider2
slider3
slider4
slider5
slider6

Swiper的progress是: 

Slide1的progress是: 

Slide2的progress是: 

Slide3的progress是: 

Slide4的progress是: 

Slide5的progress是: 

Slide6的progress是: 

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script> 
var mySwiper = new Swiper('.swiper',{
watchSlidesProgress : true,
})
mySwiper.progress;
mySwiper.slides[2].progress;
</script>