🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

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

You May Also Like