有时候轮播图切换图片时,需要将其他部分也更改,但是不想写到轮播图里怎么办?
这里就需要动态获取轮播图切换时的索引值,来更改其他部分的内容。
代码如下:
- var swiper = new Swiper(".mySwiper", {
- navigation: {
- nextEl: ".swiper-button-next",
- prevEl: ".swiper-button-prev",
- },
- // loop:true,
- autoplay: {
- disableOnInteraction: false,
- },
- on: {
- slideChangeTransitionStart: function(){
- console.log(this.activeIndex);
- },
- },
-
- });
this.activeIndex:就是当前页面的索引值,通过获取索引值,在该方法内实现需求。
注意:需要将loop设为false。而且初始化的时候是不会执行该方法的,只有切换才能执行。
若想要初始化也执行,则是这样的:
- var mySwiper = new Swiper('.swiper',{
- on: {
- init: function(swiper){
- //Swiper初始化了
- alert('当前的slide序号是'+this.activeIndex);//或者swiper.activeIndex,swiper与this都可指代当前swiper实例
- this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件,需要先设置transitionEnd
-
- },
- },
- })