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

PropsDescriptionTypeDefaultOptions/Note
autoplaythe interval (ms) of autoplay; set 0 to disable autoplayNumber30000, [500, +Int.Max)
transitionanimation effectsStringslideslide, slideY, fade
default-indexdefault selected indexNumber0[0, length - 1]
has-dotsdisplay the indication dotsBooleantrue-
is-preventprevent the default eventBooleantrueset it to false when binding click event to swiper-item
is-loopinfinite loopBooleantrue-
dragable-Booleantrue-
use-native-driverenable 3D accelerationBooleantrue-

Swiper Events

@beforeChange(from, to)

event to be triggered before the slide is changed

ArgsDescriptionType
fromthe current indexNumber
tothe next indexNumber
@afterChange(from, to)

event to be triggered after the slide is changed

ArgsDescriptionType
fromthe current indexNumber
tothe next indexNumber

Swiper Methods

getSwiperInstance

get Bscroll instance

resetSwiper

reset swiper for asynchronous rendering