Swiper component For Vue 1.0.
Clone or download
Latest commit f4030ee Jul 22, 2018
Permalink
Failed to load latest commit information.
demo loop mode Oct 15, 2016
dist build Oct 15, 2016
src loop mode Oct 15, 2016
.gitignore First version. May 8, 2016
LICENSE Initial commit May 8, 2016
README.md Update README.md Jul 22, 2018
package.json update version Oct 15, 2016
webpack.config.js support horizontal display May 31, 2016

README.md

npm npm GitHub release GitHub issues GitHub stars

NPM

vue-swiper

Swiper component. Easy to use.

Examples

basic 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.
================== ================ ============================