Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
nft-hooper
Advanced tools
Readme
Vue.js carousel component, optimized to work with Vue.
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |
First step is to install it using yarn
or npm
:
npm install hooper
# or use yarn
yarn add 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
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. |
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 |
FAQs
A customizable accessible carousel slider optimized for Vue
The npm package nft-hooper receives a total of 0 weekly downloads. As such, nft-hooper popularity was classified as not popular.
We found that nft-hooper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.