hoo

hooper

A customizable accessible carousel slider optimized for Vue

Showing:

Popularity

Downloads/wk

17.7K

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

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

ChromeFirefoxSafariOperaEdgeIE
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

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

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

more info at Documentation

Available Props

PropDefaultDescription
itemsToShow1count of items to showed per view (can be a fraction).
itemsToSlide1count of items to slide when use navigation buttons.
initialSlide0index number of initial slide.
infiniteScrollfalseenable infinite scrolling mode.
centerModefalseenable center mode.
verticalfalseenable vertical sliding mode.
rtlnullenable rtl mode.
mouseDragtruetoggle mouse dragging.
touchDragtruetoggle touch dragging.
wheelControltruetoggle mouse wheel sliding.
keysControltruetoggle keyboard control.
shortDragtrueenable any move to commit a slide.
autoPlayfalseenable auto sliding to carousel.
playSpeed2000speed of auto play to trigger slide in ms.
transition300sliding transition time in ms.
sync''sync two carousels to slide together.
hoverPausetruepause autoPlay if the mouse enters the slide.
trimWhiteSpacefalselimit 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';

ClassPropertyDefaultDescription
hooperheight200pxthe default height of the slider, set to auto to scale with content

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial