❤
npm
Sign UpSign In

vue-swiper2

2.0.0 • Public • Published

npm npm GitHub release GitHub issues GitHub stars

NPM

vue-swiper

Swiper component for Vue 2.0. Easy to use.
Fork from https://github.com/weilao/vue-swiper

Examples

basic demo

webpack ES2015 demo

Install

npm i vue-swiper2 -S

Usage

import Vue from 'vue'
import Swiper from 'vue-swiper2'
 
new Vue({
    el: 'body',
    components: {Swiper},
    methods: {
        onSlideChangeStart (currentPage) {
            console.log('onSlideChangeStart', currentPage);
        },
        onSlideChangeEnd (currentPage) {
            console.log('onSlideChangeEnd', currentPage);
        }
    }
});
<swiper 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.

Readme

Keywords

none

Package Sidebar

Install

npm i vue-swiper2

Repository

github.com/zhenhappy/vue-swiper2

Homepage

github.com/zhenhappy/vue-swiper2

Weekly Downloads

2

Version

2.0.0

License

MIT

Last publish

Collaborators

  • zhenhappy
Try on RunKit
Report malware