Nitrogen Poisonous Monoxide


    0.4.5 • Public • Published

    leaps logo

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


    Vue.js carousel component, optimized to work with Vue.


    • 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


    First step is to install it using npm:

    npm install hooper-vue3

    Use Hooper

          slide 1
          slide 2
      import { Hooper, Slide } from 'hooper-vue3';
      import 'hooper-vue3/dist/hooper.css';
      export default {
        name: 'App',
        components: {

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




    npm i hooper-vue3

    DownloadsWeekly Downloads






    Unpacked Size

    98.4 kB

    Total Files


    Last publish


    • nickdam