hooper2
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
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. |
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/dist/hooper.css';
Class | Property | Default | Description |
---|---|---|---|
hooper |
height |
200px | the default height of the slider, set to auto to scale with content |
Dependencies
@babel/core: ^7.5.5@commitlint/cli: ^12.0.1@vue/test-utils: ^1.0.0-beta.29babel-core: ^7.0.0-bridge.0babel-eslint: ^10.0.2babel-jest: ^24.8.0chalk: ^2.4.2eslint: ^6.1.0eslint-config-prettier: ^6.0.0eslint-plugin-prettier: ^3.1.0eslint-plugin-vue: ^6.2.2filesize: ^4.1.2friendly-errors-webpack-plugin: ^1.7.0gzip-size: ^5.1.1html-webpack-plugin: ^3.2.0husky: ^3.0.3jest: 24.8.0lint-staged: ^9.2.1mkdirp: ^0.5.1prettier: ^1.18.2pretty-quick: ^1.11.1progress-bar-webpack-plugin: ^1.12.1rollup: ^1.19.4rollup-plugin-babel: ^4.3.3rollup-plugin-commonjs: ^10.0.2rollup-plugin-css-only: ^1.0.0rollup-plugin-node-resolve: ^5.2.0rollup-plugin-replace: ^2.2.0rollup-plugin-vue: ^4.7.2uglify-js: ^3.6.0vue: ^2.6.12vue-jest: ^3.0.4vue-server-renderer: ^2.6.10vue-template-compiler: ^2.6.10vuepress: ^1.0.3