A customizable accessible carousel slider optimized for Vue

  • hooper

Downloads in past


0.3.44 years ago5 years agoMinified + gzip package size for hooper in KB


<img width="400" alt="leaps logo" src="https://github.com/baianat/hooper/blob/master/hooper.svg">

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

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


  • 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


First step is to install it using yarn or npm:
npm install hooper

# or use yarn
yarn add hooper

Use Hooper

      slide 1
      slide 2

  import { Hooper, Slide } from 'hooper';
  import 'hooper/dist/hooper.css';

  export default {
    name: 'App',
    components: {

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.| |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