vue-swiper

Swiper component. Easy to use.

Examples

basic demo

webpack ES2015 demo

Install

npm i vue-swiper -S

Usage

import Vue from 'vue'
import Swiper from 'vue-swiper'

new Vue({
    el: 'body',
    components: {Swiper},
    methods: {
        onSlideChangeStart (currentPage) {
            console.log('onSlideChangeStart', currentPage);
        },
        onSlideChangeEnd (currentPage) {
            console.log('onSlideChangeEnd', currentPage);
        }
    }
});

<swiper v-ref: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">
    <div>Page 1</div>
    <div>Page 2</div>
    <div>Page 3</div>
</swiper>

Api

Properties

| Name | Type | Default | Description | |----------------------|-----------|--------------|--------------------------------------------------------------------| | direction | String | "vertical" | Could be 'horizontal' or 'vertical' (for vertical slider). | | mousewheel-control | Boolean | true | Set to true to enable navigation through slides using mouse wheel. | | pagination-visible | Boolean | false | Toggle (hide/true) pagination container visibility when click on Slider's container | | pagination-clickable | Boolean | false | If true then clicking on pagination button will cause transition to appropriate slide. | | performace-mode | Boolean | false | Disable advance effect for better performance. | | loop | Boolean | false | Set to true to enable continuous loop mode | | ==================== | ========= | ============ | =================== |

Methods

| Method | Description | |-------------------|--------------------------| | next() | Go next page. | | prev() | Go previous page. | | setPage(Number) | Set current page number. |

Events

| Name | Parameters | Description | |--------------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------| | slide-change-start | pageNumber | Fire in the beginning of animation to other slide (next or previous). | | slide-change-end | pageNumber | Will be fired after animation to other slide (next or previous). | | slide-revert-start | pageNumber | Fire in the beginning of animation to revert slide (no change). | | slide-revert-end | pageNumber | Will be fired after animation to revert slide (no change). | | slider-move | offset | Callback function, will be executed when user touch and move finger over Swiper and move it. Receives swiper instance and 'touchmove' event as an arguments. | | ================== | ================ | ============================ |