Concise Slider Component For Vue.js

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

Preview:

Changelog:

v4.2.4 (02/15/2022)

• bugfix

v4.2.1 (09/16/2021)

• bugfix

v4.1.8 (08/20/2021)

• fix: sliderlength bug

v4.1.5 (01/06/2021)

• Bugfix

v4.1.3 (01/04/2021)

• Bugfix

Download Details:

Author: warpcgd

Live Demo: https://warpcgd.github.io/vue-concise-slider/demos/

Download Link: https://github.com/warpcgd/vue-concise-slider/archive/master.zip

Official Website: https://github.com/warpcgd/vue-concise-slider

Install & Download:

npm install vue-concise-slider --save