Slight vue slider component for H5 applications.
- Slight, only has better-scroll dependency.
- Support long content page.
- A great diversity of paging animations.
- Without fake element at
loop
mode. - Optimized displayed
SwiperItem
count.
Online demo: https://edgarallanzp.github.io/vue-h5-swiper/
Or
yarn dev
npm install vue-h5-swiper --save
# or use yarn
yarn add vue-h5-swiper
<template>
<swiper>
<swiper-item>
...
Content Slot
...
</swiper-item>
</swiper>
</template>
<script>
import { Swiper, SwiperItem } from 'vue-h5-swiper';
export default {
components: {
Swiper,
SwiperItem
}
};
</script>
Prop | Default | Description |
---|---|---|
loop |
false |
Enable loop mode. |
show-indicator |
true |
Display indicators. |
page-transition |
'move' |
Paging animation. Available animations: ['move', 'fade', 'cover', 'carousel', 'scale', 'glue', 'cube', 'push', 'three'] |
autoplay |
false |
Auto slide. |
interval |
3000 |
Auto slide interval. |
Event | Params | Description |
---|---|---|
beforeChange |
activeIndex , oldIndex |
Before paging hook. |
afterChange |
activeIndex , oldIndex |
After paging hook. |
Method | Description |
---|---|
moveTo(index) |
Move to the specified page. |
next() |
Move to next page. |
prev() |
Move to previous page. |
Slot | Description |
---|---|
default | For SwiperItem . |
indicator | Custom swiper indicator. |
Slot | Description |
---|---|
default | For display content. |
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Copyright (c) 2019, Edgar Li