hooper is a responsive, customizable, touch-based carousel slider optimized to work with Vue.js.
Features
- Easily customizable through rich API and add-ons.
- Touch, Keyboard, Mouse Wheel, and Navigation support.
- Two-way control carousels (sync).
- Full RTL layout support.
- Supports vertical sliding.
- Responsive breakpoints.
- Seamless infinite scroll.
- Accessible by providing a robust structure and user control.
- Optimized to work with Vue framework.
- SSR Support.
How to make use of it:
Installation:
npm install hooper # or use yarn yarn add hooper
Use Hooper
<template>
<hooper>
<slide>
slide 1
</slide>
<slide>
slide 2
</slide>
...
</hooper>
</template><script>
import { Hooper, Slide } from 'hooper';
import 'hooper/dist/hooper.css';
export default {
name: 'App',
components: {
Hooper,
Slide
}
}
</script>Available Props
| Prop | Default | Description |
|---|---|---|
itemsToShow | 1 | count of items to show per view (can be a fraction). |
itemsToSlide | 1 | count of items to slide when using navigation buttons. |
initialSlide | 0 | the index number of the initial slide. |
infiniteScroll | false | enable infinite scrolling mode. |
centerMode | false | enable center mode. |
vertical | false | enable vertical sliding mode. |
rtl | null | enable RTL mode. |
mouseDrag | true | toggle mouse dragging. |
touchDrag | true | toggle touch dragging. |
wheelControl | true | toggle mouse wheel sliding. |
keysControl | true | toggle keyboard control. |
shortDrag | true | enable any move to commit a slide. |
autoPlay | false | enable auto sliding to the carousel. This could be changed dynamically. |
playSpeed | 2000 | speed of auto play to trigger a slide in ms. |
transition | 300 | sliding transition time in ms. |
sync | ” | sync two carousels to slide together. |
hoverPause | true | pause autoPlay if the mouse enters the slide. |
trimWhiteSpace | false | limit carousel to slide only when there will be no completely empty slide space. |
settings | { } | an object to pass all settings. |
customizable carousel slider for vue js, Hooper Plugin/Github
See Demo And Download
Official Website(baianat): Click Here
This superior jQuery/javascript plugin is developed by baianat. For extra advanced usage, please go to the official website.
