vue-concise-slider

A simple vue sliding component

Simple and lightweight (~36kB)
Multiple sliding effects
Simple configuration

Demo

Features

简单配置

以vue组件为中心的结构，用最少的配置帮助你实现滑动。

轻量体积

36KB的大小，帮助你在电脑和手机端快速加载。

多种滑动样式

十种以上滑动特效，满足你产品经理所有需求

Easy Start

  1. npm i vue-concise-slider -D

  2. Create your vue component

<template>
<!-- Make a div wrapped slider,set height and width -->
 <div style="width:100%;margin:20px auto;height:400px">
      <!-- Using the slider component -->
      <slider ref="slider" :options="options">
          <!-- slideritem wrapped package with the components you need -->
          <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
          <!-- Customizable loading -->
          <div slot="loading">loading...</div>
      </slider>
 </div>
</template>
<script>
// import slider components
import { slider, slideritem } from 'vue-concise-slider'
export default {
   el: '#app',
   data () {
      return {
        //data list [array]
        someList:[
          {
            html: 'slide1',
            style: {
              'background': '#1bbc9b'
            }
          },
          {
            html: 'slide2',
            style: {
              'background': '#4bbfc3'
            }
          },
          {
            html: 'slide3',
            style: {
              'background': '#7baabe'
            }
          }
        ],
        //Slider configuration [obj]
        options: {
          currentPage: 0
        }
      }
    },
    components: {
      slider,
      slideritem
    }
}
</script>