0.0.17 • Published 2 years ago
vue-slider-native v0.0.17
vue-slider-native
Let your visitors scroll freely through your products or other items with native scroll. No translateX and emulating native behavior of scrolling. With support of dots and arrows.
Demo
See examples of usage and docs here.
Usage
In template
<vue-slider-native
scroller-id="scroller"
:component="AppItem"
:items="items"
:options="options"
/>In JS
import {VueSliderNative} from 'vue-slider-native';
import AppItem from '@/components/Item'; // any component you want to loop
export default {
components: {
VueSliderNative
},
data() {
return {
AppItem,
items: [], // array of your items
options: { // see all possible options below
arrows: true
}
};
}
}Options
| Option | Default | Description |
|---|---|---|
| moveOnClickboolean | true | Define whether the click on one item should become highlighted and move to active position. |
| durationnumber | 250 | Determine duration of scroll to element in milliseconds. |
| centerModeboolean | false | When turned on, active item will be centered. Best to be combined together with preactivatedItem option to create e.g. nice native scroll timeline. |
| stickyboolean | false | Scroll to closest active item after user finished scrolling horizontally using touchpad on horizontal mouse wheel. |
| dotsboolean | false | Shows/hides dots. Better to use only if items are wide enough. |
| arrowsboolean | true | Shows/hides arrows. |
| highlightItemsnumber | 1 | How many items should be highlighted as active. |
| preactivatedItemnumber | null | If you don't want to start at the beginning, set index of first item here. |
| responsiveobject | null | Redefine options for responsiveness. As keys use values such as '900px'. From that key all new options will be applied downwards. |
Customize arrows
In case you need to change default arrows you can do so with <template v-slot:prevArrow /> and <template v-slot:nextArrow /> In these slots you can style and change label in any way you want.
<vue-slider-native>
<template v-slot:prevArrow>
<div class="custom-arrow">
custom prev label
</div>
</template>
</vue-slider-native>Callbacks
activeItemUpdated(activeItem)
If you need to do some action with item that is currently highlighted, you can do so with this callback.
<VueSliderNative @activeItemUpdated="doSomeAction(activeItemIndex)" />TODOs:
- add vertical mode
- fine-tune center mode