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