vue-concise-slider

A simple vue sliding component

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

Demo

Features

Simple configuration

A structure centered around the vue component that helps you achieve sliding with minimal configuration.

Lightweight volume

Load on demand, only 30k in size, to help you load quickly on your computer and mobile phone.

Multiple sliding styles

More than ten sliding effects to meet all your product manager needs

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>