mand-mobile/components/swiper

title	preview
Swiper	https://didi.github.io/mand-mobile/examples/#/swiper

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

Import

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

Vue.component(Swiper.name, Swiper)
Vue.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, fade
default-index	default selected index	Number	0	[0, length - 1]
has-dots	whether to display the indication dots	Boolean	true	-
is-prevent	whether to prevent the default event	Boolean	true	set it to false when binding click event to swiper-item
is-loop	whether is infinite loop	Boolean	true	-
dragable	whether is dragable	Boolean	true	-

Swiper Methods

play(autoplay)

enable autoplay

Args	Description	Type	Default	Note
autoplay	the interval of autoplay	Number	3000	[500, +Int.Max)

vm.$refs.swiper.play(5000)

stop()

stop autoplay

vm.$refs.swiper.stop()

prev()

switch to the previous item

vm.$refs.swiper.prev()

next()

switch to the next item

vm.$refs.swiper.next()

goto(index)

switch to index

Args	Description	Type	Default	Note
index	the index to be shown	Number	0	[0, length - 1]

vm.$refs.swiper.goto(2)

getIndex()

get the index on display

Args	Description	Type
index	the index on display	Number

var index = vm.$refs.swiper.getIndex()

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