Concise Slider Component For Vue.js

Install & Download:

npm install vue-concise-slider --save

Description:

A simple, lightweight, responsive, touch-friendly slider/carousel component for Vue.js.

Features:

Cross platform.
Mobile friendly.
Vertical/horizontal scrolling.
Auto scroll.
Infinite scroll.
Custom pagination.

How to use it:

1. Import and register the slider component.

import { slider, slideritem } from 'vue-concise-slider'

export default {
  // ...
  components: {
    slider,
    slideritem
  },
  // ...
}

2. Add the slider component to the template.

<template>
  <!-- Slider Wrapper -->
  <div style="width:100%;margin:20px auto;height:400px">
    <!-- Slider component -->
    <slider ref="slider" :options="options">
        <!-- slideritem -->
        <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
        <!-- Customizable loading indicator -->
        <div slot="loading">loading...</div>
    </slider>
  </div>
</template>

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
  }
}