Code Monkey home page Code Monkey logo

hooper's Introduction

leaps logo

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

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

Chrome Firefox Safari Opera Edge IE
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>

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

hooper's People

Contributors

abdelrahman3d avatar eriksterner avatar logaretm avatar emanuelmutschlechner avatar mccare avatar jerrellniu avatar jordigoyanes avatar markpinero avatar mucaccino avatar dn-achim avatar sanasol avatar davidrouyer avatar israelmuca avatar mannuelf avatar melrefaie avatar yamamoto7 avatar

Stargazers

Amanda Wallin avatar

Watchers

Daniel Jonsson avatar petitsapin avatar James Cloos avatar Daniel Isaksson avatar Einar Γ–berg avatar Hans Eklund avatar  avatar Chris avatar Lisandro Mindel avatar waverly avatar Miha Klasinc avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.