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

相关项目