Vue-h5-swiper NPM

Features

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.

Demos

Online demo: https://edgarallanzp.github.io/vue-h5-swiper/

yarn dev

Installation

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>

Documentation

Swiper

Props

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.

Events

Event	Params	Description
`beforeChange`	`activeIndex`, `oldIndex`	Before paging hook.
`afterChange`	`activeIndex`, `oldIndex`	After paging hook.

Methods

Method	Description
`moveTo(index)`	Move to the specified page.
`next()`	Move to next page.
`prev()`	Move to previous page.

Slots

Slot	Description
default---------	For `SwiperItem`.
indicator-------	Custom swiper indicator.

SwiperItem

Slots

Slot	Description
default---------	For display content.

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

License

MIT

vue-h5-swiper vue swiper vue slide vue carousel vue h5 h5 swiper h5

better-scroll

@everything-registry/sub-chunk-3082 @infinitebrahmanuniverse/nolb-vue-h

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago