Hooper
made with
Vuejs
简介及使用教程
Hooper是一个基于Vue.js的轮播组件,可以通过丰富的API和附加组件轻松进行自定义,支持RTL、垂直滑动和双向控制轮播。它提供了稳定、易于访问的结构,包括触摸、键盘、鼠标滚轮和导航支持。
安装
Npm
npm i hooper
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>
props
Prop | Default | Description |
---|---|---|
itemsToShow |
1 | 每个视图显示的项目数 (可以是一部分) |
itemsToSlide |
1 | 使用导航按钮时的项目数 |
initialSlide |
0 | 初始化时显示项目的索引号 |
infiniteScroll |
false | 启动无限滚动模式 |
centerMode |
false | 启动中心模式 |
vertical |
false | 启动垂直滚动模式 |
rtl |
null | 启动rtl模式 |
mouseDrag |
true | 切换鼠标拖拽 |
touchDrag |
true | 切换触摸拖拽 |
wheelControl |
true | 启动鼠标滚轮切换 |
keysControl |
true | 切换键盘控制 |
shortDrag |
true | 启动任何移动都切换项目 |
autoPlay |
false | 启动自动播放,这个属性可以被动态改变。 |
playSpeed |
2000 | 切换项目的速度,单位为ms |
transition |
300 | 项目变换的时间,单位为ms |
sync |
'' | 同步两个轮播的滚动 |
hoverPause |
true | 当鼠标进入时暂停滑动 |
trimWhiteSpace |
false | 限制只有在没有完全空的滑动空间时才能滑动 |
settings |
{ } | 定义所有设置的对象 |
示例
作者
Baianat
@baianat相关项目