A Customizable Accessible Carousel Slider Optimized for Vue

hooper is a responsive, customizable, touch-based carousel slider optimized to work with Vue.js.

Features

Easily customizable through rich API and add-ons.
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.

How to make use of it:

Installation:

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>

Available Props

Prop	Default	Description
`itemsToShow`	1	count of items to show per view (can be a fraction).
`itemsToSlide`	1	count of items to slide when using navigation buttons.
`initialSlide`	0	the index number of the 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 the carousel. This could be changed dynamically.
`playSpeed`	2000	speed of auto play to trigger a 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.