3.0.5 • Published 5 years ago
vue-snb-slider v3.0.5
vue-snb-slider
vue-snb-slider is a slider componen for Vue.js.
Mobile demo
Install
$ npm install vue-snb-slider
Import
Import using module
Import components to your project:
// in ES6 modules
import { Slider, SliderItem } from 'vue-snb-slider';
// in CommonJS
const { Slider, SliderItem } = require('vue-snb-slider');
// in Global variable
const { Slider, SliderItem } = VueSnbSlider;
And register components:
Vue.component('slider', Slider);
Vue.component('slider-item', SliderItem);
Import using script tag
<script src="../node-modules/vue-snb-slider/dist/vue-snb-slider.js"></script>
const vueSlider = VueSnbSlider.Slider;
const vueSliderItem = VueSnbSlider.SliderItem;
new Vue({
el: 'body',
components: {
'slider': vueSlider,
'slider-item': vueSliderItem
}
});
Usage
Work on a Vue instance:
<slider>
<slider-item>slider1</slider-item>
<slider-item>slider2</slider-item>
<slider-item>slider3</slider-item>
</slider>
Slider Options
Props
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 |
Events
Event Name | Description | params |
---|---|---|
change | triggers when current slider-item change | new slider item Index |
SliderItem Options
Props
Option | Type | Description | Default |
---|---|---|---|
item | Object | -- | -- |
Events
Event Name | Description | params |
---|---|---|
sliderItemOnClick | triggers when click slider-item | Props item: {} |
Development
Watching with hot-reload:
$ npm run dev
Develop on real remote device:
$ npm run remote-dev {{ YOUR IP ADDRESS }}
License
MIT
3.0.5
5 years ago