# 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 `npm`: ```bash npm install hooper-vue3 ``` ### Use Hooper ```vue ``` > 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 |