hooper-lust v0.0.13

Hooper-Lust

​ Vue.js carousel component, optimized to work with Vue based on Baianat's Hooper. ​

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. ​

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

​

Getting started

​

Installation

​ First step is to install it using yarn or npm: ​

npm install hooper-lust
​
# or use yarn
yarn add hooper-lust

​

Use Hooper

​

<template>
  <Hooper>
    <Slide>
      slide 1
    </Slide>
    <Slide>
      slide 2
    </Slide>
    ...
  </Hooper>
</template>
​
<script>
  import { Hooper, Slide } from 'hooper-lust';
  import 'hooper-lust/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-lust/dist/hooper.css. ​ more info at Baianat Docs ​

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-lust/dist/hooper.css'; ​ |Class | Property | Default | Description| |-----------------|----------|---------|------------| |hooper | height | 200px | the default height of the slider, set to auto to scale with content