An easy-to-use and quite customizable slider for Vue.js
vue-colorful-slider
An easy-to-use and quite customizable slider for Vue.js
Bright colors and unusual layout will make users of your application surprised
install
npm install vue-colorful-slider
Features
- Easy to use
- Light and dark themese
- 5 ways to navigate
- Touchpad/wheel
- Dots
- Keyboard Arrows
- Slider Arrows
- Sidebar Captions
- Breathtaking slide change 3d animation
- Support for autoplay
Usage
<template>
<div id="app">
<ColorfulSlider :sidebar="true">
<Slide>
This is a first slide
</Slide>
<Slide>
Yea, there is a second slide
</Slide>
</ColorfulSlider>
</div>
</template>
<script>
import {ColorfulSlider, Slide} from 'vue-colorful-slider'
export default {
data() {
return {
}
},
name: 'App',
components: {
ColorfulSlider,
Slide
}
}
</script>
Props
- dots – activate/deactivate dots navigation (bool)
default: true - arrows – activate/deactivate arrows navigation (bool)
default: false - light – enabling a light theme (bool)
default: true - autoplay – enabling slider autoplay
default: false - autoplaySpeed – slide change interval, ms (Number)
default: 3000 - sidebar – activate/deactivate captions navigation (bool)
default: false - captions – slide names for sidebar (Array)
You must pass as many captions as slides, otherwise the missing slides will be marked with an ordinal number in the sidebar.
...
data() {
return {
captions: [
'Our team',
'About',
'Contact us',
'Our patreon'
]
}
},
...
- wheelActive – activate/deactivate touchpad or wheel navigation (bool)
default: true