hooper

by baianat

baianat / hooper

🎠 A customizable accessible carousel slider optimized for Vue

534 Stars 99 Forks Last release: over 1 year ago (0.3.1) MIT License 1 Commits 20 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

leaps logo

Average time to resolve an issue Percentage of issues still open npm npm

Hooper

Vue.js carousel component, optimized to work with Vue.

Features

  • Easily customizable through rich API and addons.
  • 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.

Browser Support

| Chrome | Firefox | Safari | Opera | Edge | IE | | --- | --- | --- | --- | --- | --- | | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |

Getting started

Installation

First step is to install it using

yarn
or
npm
:
npm install hooper

or use yarn

yarn add hooper

Use Hooper

If you are using PurgeCSS, make sure to whitelist hooper css When importing

hooper/dist/hooper.css
.

more info at Documentation

Available Props

|Prop |Default |Description| |-----------------|-----|-----------| |

itemsToShow
|1 |count of items to showed per view (can be a fraction).| |
itemsToSlide
|1 |count of items to slide when use navigation buttons.| |
initialSlide
|0 |index number of 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 carousel. This could be changed dynamically.| |
playSpeed
|2000 |speed of auto play to trigger 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.|

Available CSS Properties

Please also look at the source to style the slider. An initial style can be imported as

@import '~hooper/dist/hooper.css';

|Class | Property | Default | Description| |-----------------|----------|---------|------------| |

hooper
|
height
| 200px | the default height of the slider, set to auto to scale with content

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.