vue-mint-slider is a slider componen for Vue.js.
$ npm install vue-mint-sliderImport 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 devDevelop on real remote device:
$ npm run remote-dev {{ YOUR IP ADDRESS }}MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent