Skip to content

Latest commit

 

History

History
68 lines (54 loc) · 4.35 KB

README.md

File metadata and controls

68 lines (54 loc) · 4.35 KB

slider

easier banner with more function for Vue2.x

demo

live-demo

A Vue.js project

Build DEMO Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev


    <slider
    :pagination-visible="true"
    :slides="slides"
    :repeating="true"
    :auto="5000">

    <div v-for="(slide,index) in slides" :key="index">
      <a :href="slide.value">
        <img width="350" height="150" :src="slide.image" />
      </a>
    </div>
  </slider>

Api

Properties

Name Type Default Description
mousewheel-control Boolean true Set 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
performace-mode Boolean false Disable animation for better performance for bad android.
slides Array [] the banner data just be used to observe by pagination when you add or remove a child slide
repeating Boolean false Set true to enable repeating from last to first or first to last
auto Number 0 Set to 0ms to disable silders auto change
slide-container-class String `` Set it to add custom style of the slide container . please add the !important to overide the old style
pagination-container-class String `` Set it to add custom style of the pagination container . please add the !important to overide the old style
pagination-class String `` Set it to add custom style of the pagination . please add the !important to overide the old style
==================== ========= ============ ===================

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

Methods

Name Parameters Description
next() no call it to slide to the next slider eg:this.$refs.test_prev_next.next();
prev() no call it to slide to the previous slider eg:this.$refs.test_prev_next.prev();
================== ================ ============================