simple-vue-swiper v1.0.0

simple-vue-swiper

swiper component. Easy to use. Base on vue-swiper

demo

simple-vue-swiper

how to use

yarn add simple-vue-swiper # or npm i simple-vue-swiper -swiper

<template>
  ...
  <swiper
    direction="horizontal"
    :mousewheel-control="true"
    :performance-mode="false"
    :pagination-visible="true"
    :pagination-clickable="true"
    :loop="true"
    @slide-change-start="onSlideChangeStart"
    @slide-change-end="onSlideChangeEnd"
    @slide-revert-start="onSlideRevertStart"
    @slide-revert-end="onSlideRevertEnd"
    @slider-move="onSliderMove"
  >
    <div>page one</div>
    <div>page two</div>
    <div>page three</div>
    <div>page four</div>
    <div>page five</div>
  </swiper>
  ...
</template>

<script>
import Swiper from 'simple-vue-swiper'
export default {
  components: {
    Swiper
  },
  methods: {
    onSlideChangeStart: function(currentPage) {
      console.log("onSlideChangeStart", currentPage);
    },
    onSlideChangeEnd: function(currentPage) {
      console.log("onSlideChangeEnd", currentPage);
    },
    onSlideRevertStart: function(currentPage) {
      console.log("onSlideRevertStart", currentPage);
    },
    onSlideRevertEnd: function(currentPage) {
      console.log("onSlideRevertEnd", currentPage);
    },
    onSliderMove: function(offset) {
      console.log("onSliderMove", offset);
    },
  }
}
</script>

Api

Properties

Methods

Events