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.

more info at Documentation

Available Props

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