Need help with hooper?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

baianat
638 Stars 116 Forks MIT License 1 Commits 98 Opened issues

Description

🎠 A customizable accessible carousel slider optimized for Vue

Services available

!
?

Need anything else?

Contributors list

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.