Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baianat/hooper
🎠A customizable accessible carousel slider optimized for Vue
https://github.com/baianat/hooper
carousel carousel-component carousel-slider hooper slide slider vue vuejs
Last synced: about 2 months ago
JSON representation
🎠A customizable accessible carousel slider optimized for Vue
- Host: GitHub
- URL: https://github.com/baianat/hooper
- Owner: baianat
- License: mit
- Created: 2018-11-07T17:04:03.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T19:27:13.000Z (almost 2 years ago)
- Last Synced: 2024-06-20T05:24:00.247Z (3 months ago)
- Topics: carousel, carousel-component, carousel-slider, hooper, slide, slider, vue, vuejs
- Language: JavaScript
- Homepage: https://baianat.github.io/hooper/
- Size: 2.17 MB
- Stars: 713
- Watchers: 8
- Forks: 133
- Open Issues: 117
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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`:
```bash
npm install hooper
# or use yarn
yarn add hooper
```
### Use Hooper
```vue
slide 1
slide 2
...
import { Hooper, Slide } from 'hooper';
import 'hooper/dist/hooper.css';
export default {
name: 'App',
components: {
Hooper,
Slide
}
}
```
> If you are using [PurgeCSS](https://www.purgecss.com/), make sure to whitelist hooper css When importing `hooper/dist/hooper.css`.
more info at [Documentation](https://baianat.github.io/hooper/)
### 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/dist/hooper.css';`
|Class | Property | Default | Description|
|-----------------|----------|---------|------------|
|`hooper` | `height` | 200px | the default height of the slider, set to auto to scale with content