Skip to content
🎠 A customizable accessible carousel slider optimized for Vue
Vue JavaScript Shell
Branch: master
Clone or download
Pull request Compare This branch is 121 commits ahead, 1 commit behind baianat:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
demo
docs
scripts
src
tests
.babelrc
.gitignore
.npmignore
LICENSE
README.md
hooper.svg
jest.config.json
package.json
yarn.lock

README.md

leaps logo

Average time to resolve an issue Percentage of issues still open npm npm

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

Chrome Firefox Safari Opera Edge IE
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.
You can’t perform that action at this time.