codinglabsau / hooper

🎠 A customizable accessible carousel slider optimized for Vue

Hooper

Vue.js carousal 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';

  export default {
    name: 'App',
    components: {
      Hooper,
      Slide
    }
  }
</script>

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	false	enable rtl mode.
mouseDrag	true	toggle mouse dragging.
touchDrag	true	toggle touch dragging.
wheelControl	true	toggle mouse wheel sliding.
keysControl	false	toggle keyboard control.
shortDrag	true	enable any move to commit a slide.
autoPlay	false	enable auto sliding to carousal.
playSpeed	3000	speed of auto play to trigger slide in ms.
transition	300	sliding transition time in ms.
sync	''	sync two carousels to slide together.
settings	{ }	an object to pass all settings.