vue-mint-slider is a slider componen for Vue.js.
$ npm install vue-mint-slider
Import components to your project:
require('vue-mint-slider/dist/vue-mint-slider.css');
// in ES6 modules
import { Slider, SliderItem } from 'vue-mint-slider';
// in CommonJS
const { Slider, SliderItem } = require('vue-mint-slider');
// in Global variable
const { Slider, SliderItem } = VueMintSlider;
And register components:
Vue.component('slider', Slider);
Vue.component('slider-item', SliderItem);
<link rel="stylesheet" href="../node-modules/vue-mint-slider/dist/vue-mint-slider.css" charset="utf-8">
<script src="../node-modules/vue-mint-slider/dist/vue-mint-slider.js"></script>
const vueSlider = VueMintSlider.Slider;
const vueSliderItem = VueMintSlider.SliderItem;
new Vue({
el: 'body',
components: {
'slider': vueSlider,
'slider-item': vueSliderItem
}
});
Work on a Vue instance:
<slider>
<slider-item>slider1</slider-item>
<slider-item>slider2</slider-item>
<slider-item>slider3</slider-item>
</slider>
Option | Type | Description | Default |
---|---|---|---|
perView | Number | Number of slides per view (min:1). | 1 |
perGroup | Number | Set numbers of slides to define and enable group sliding. Useful to use with perView >= perGroup | 1 |
groupFull | Boolean | --- | false |
showIndicators | Boolean | Show indicators on slider bottom | true |
Event Name | Description | params |
---|---|---|
change | triggers when current slider-item change | new slider item Index |
Option | Type | Description | Default |
---|---|---|---|
item | Object | -- | -- |
Event Name | Description | params |
---|---|---|
sliderItemOnClick | triggers when click slider-item | Props item: {} |
Watching with hot-reload:
$ npm run dev
Develop on real remote device:
$ npm run remote-dev {{ YOUR IP ADDRESS }}
MIT