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