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.