Watch Star Fork

Cweili / vue-slider

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
Fork from https://github.com/warpcgd/vue-slider http://cweili.oschina.io/vue-slider/
Loading...
README_EN.md 6.63 KB

English | 中文

npm npm npm

vue-concise-slider.js


vue-concise-slider,A simple sliding component,has easy configuration,support self-adaption / fullscreen / button / page,and is compatible with mobile and PC terminal

version

v2.1.2 Supported vue2.0+

Achieved

  • Self-adaption Fullscreen
  • Compatible with mobile and PC terminal
  • Vertical Slides
  • Autoplay Slides
  • Auto Slides Per View / Carousel Mode
  • Loop Mode / Infinite Loop
  • Loop Mode / multiple slide

To Do List

  • Fade Effect
  • Parallax

Example

demo full documents

Installation

  npm install vue-concise-slider --save

How to use it

<template>
  <slider :pages="pages" :sliderinit="sliderinit">
    <!-- slot  -->
  </slider>
</template>

<script>
import slider from 'vue-concise-slider'// import slider component
export default {
   el: '#app',
   data () {
      return {
        // List of pictures [arr]
        pages:[
          {
            title: '',
            style:{
             background:'url(src/img/testimg-1.jpg)'
            }
          },
          {
           title: '',
           style:{
            background:'url(src/img/testimg-2.jpg)'
            }
          },
          {
            title: 'slide3',
            style:{
              background:'#4bbfc3',
            },
          }
        ],
        //Slider configuration[obj]
        sliderinit: {
          currentPage: 0,//current Page of slider
          thresholdDistance: 500,//Minimal distance (in px) to trigger swipe to next/previous slide during swipes
          thresholdTime: 100,//Minimal duration (in ms) to trigger swipe to next/previous slide during swipes
          autoplay:1000,//delay between transitions (in ms).
          loop:true//Set to true to enable continuous loop mode
          direction:'vertical'//Could be 'horizontal' or 'vertical' (for vertical slider).
        }
      }
    },
    components: {
        slider
    }
}
</script>

Pages / Initialize parameter

Option Type Default Description
title string - Now it is every page's title , will be echo HTML in the future.
style obj - Attribute in style will be show in page css of sliders,so you can add background/background-color,even font-size or other style to page,of course slider would calculate page's width,so you may not set width of page

Sliderinit / Initialize parameter

Option Type Default Description
direction string 'horizontal' Could be 'horizontal' or 'vertical' (for vertical slider).
currentPage number - Initing current Page of slider
thresholdDistance number - Minimal distance (in px) to trigger swipe to next/previous slide during swipes
thresholdTime number - Minimal duration (in ms) to trigger swipe to next/previous slide during swipes
autoplay number[ms] - delay between transitions (in ms).
loop boolean false Set to true to enable continuous loop mode
infinite number 1 like carousel, works with multiple slides
slidesToScroll number 1 slides scrolled at once

API / Self-Events

Method Parameters Description Example
slideTo number slide to (number) page childComponents.$emit('slideTo', num)
slideNext - next page childComponents.$emit('slideNext')
slideTo - prev page childComponents.$emit('slidePre')

API / Parents-Event

Method Parameters Description Example
slide number every slide handle even success or false can trigger this,and tell us now num of page childComponents.$on('slide', function(pagenum){console.log(pagenum)})
tap number Event will be fired when user click/tap on Slider. childComponents.$on('tap', function(pagenum){console.log(pagenum)})

Have a better idea?

Welcome to leave your opinion:https://github.com/warpcgd/vue-concise-slider/issues/1

BUG?oh no!

You can be submitted here, and i will be dealt with as soon as possible:https://github.com/warpcgd/vue-concise-slider/issues/2

Comments ( 0 )

You need to Sign in for post a comment

9_float_left_people 9_float_left_close