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


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.

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

epravednikov/hooper