Swiper

Carousel, used to cycle through a set of pictures or cards

Import

import { Swiper, SwiperItem } from  'mand-mobile-next'

Vue.createApp().component(Swiper.name, Swiper)
Vue.createApp().component(SwiperItem.name, SwiperItem)

Code Examples

API

Swiper Props

Props	Description	Type	Default	Options/Note
autoplay	the interval (ms) of autoplay; set `0` to disable autoplay	Number	`3000`	`0`, `[500, +Int.Max)`
transition	animation effects	String	`slide`	`slide`, `slideY`, `fade`
default-index	default selected index	Number	`0`	`[0, length - 1]`
has-dots	display the indication dots	Boolean	`true`	-
is-prevent	prevent the default event	Boolean	`true`	set it to `false` when binding click event to `swiper-item`
is-loop	infinite loop	Boolean	`true`	-
dragable	-	Boolean	`true`	-
use-native-driver	enable 3D acceleration	Boolean	`true`	-

Swiper Events

@beforeChange(from, to)

event to be triggered before the slide is changed

Args	Description	Type
from	the current index	Number
to	the next index	Number

@afterChange(from, to)

event to be triggered after the slide is changed

Args	Description	Type
from	the current index	Number
to	the next index	Number

Swiper Methods

getSwiperInstance

get Bscroll instance

resetSwiper

reset swiper for asynchronous rendering

Steps

TabBar

# Swiper

# Import

# Code Examples

# API

# Swiper Props

# Swiper Events

# @beforeChange(from, to)

# @afterChange(from, to)

# Swiper Methods

# getSwiperInstance

# resetSwiper