zebra-swiper

# Autoplay （自动切换）

# autoplay

  • 类型：object/boolean
  • 默认值：false

设置为true启动自动切换，并使用默认的切换设置。

options:{
    autoplay:true,
    //等同于
    /*
    autoplay: {
    delay: 3000,
    }
    */
}

# delay

  • 类型：number
  • 默认值：3000

自动切换的时间间隔，单位ms。

options:{
  autoplay: {
    delay: 1000,//1秒切换一次
  },
}

# stopOnLastSlide

  • 类型：boolean
  • 默认值：false

如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。

options:{
  autoplay: {
    stopOnLastSlide: true,
  },
}

# disableOnInteraction

  • 类型：boolean
  • 默认值：true

用户操作swiper之后，是否禁止autoplay。默认为true：停止。 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 操作包括触碰(touch)，拖动，点击pagination等。

options:{
  autoplay: {
    disableOnInteraction: false,
  },
}

# reverseDirection

  • 类型：boolean
  • 默认值：false

开启反向自动轮播。

options:{
  autoplay: {
    reverseDirection: true,
  },
}

# mySwiper.autoplay.running

如果Swiper开启了autoplay，这个值为true。

# mySwiper.autoplay.start()

开始自动切换。

methods: {
	start() {
		this.$refs.zSwiper.swiper.autoplay.start();
	}
}

# mySwiper.autoplay.stop()

停止自动切换。

methods: {
	start() {
		this.$refs.zSwiper.swiper.autoplay.stop();
	}
}

# autoplay()

回调函数，在slide自动切换开始时执行。

one

<z-swiper ref="zSwiper" v-model="list" @autoplay="autoplay">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

methods: {
	autoplay() {
		console.log("slide自动切换开始时执行",this.$refs.zSwiper.swiper)
	}
}

two

<z-swiper ref="zSwiper" v-model="list" @swiper="swiper">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

methods: {
	swiper(){
		this.$refs.zSwiper.swiper.on("autoplay", (swiper) => {
			console.log("slide自动切换开始时执行",swiper)
		})
	}
}

# autoplayResume()

回调函数，当自动切换（autoplay）从暂停状态恢复运行时执行。

one

<z-swiper ref="zSwiper" v-model="list" @autoplayResume="autoplayResume">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

methods: {
	autoplayResume() {
		console.log("当自动切换（autoplay）从暂停状态恢复运行时执行",this.$refs.zSwiper.swiper)
	}
}

two

<z-swiper ref="zSwiper" v-model="list" @swiper="swiper">
	<z-swiper-item v-for="(item,index) in list" :key="index">
		<image class="image" :src="item" mode="aspectFill">
		</image>
	</z-swiper-item>
</z-swiper>

methods: {
	swiper(){
		this.$refs.zSwiper.swiper.on("autoplayResume", (swiper) => {
			console.log("当自动切换（autoplay）从暂停状态恢复运行时执行",swiper)
		})
	}
}

# autoplayStart()

回调函数，自动切换开始时执行(由不自动切换进入到自动切换)。

# autoplayStop(swiper)

回调函数，自动切换结束时执行（由自动切换进入到不自动切换）。

← Pagination （分页器） →