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