可自定义的Vue.js旋转木马滑块– hooper

可自定义的Vue.js旋转木马滑块– hooper

插件名称:hooper

发布时间:2020年6月11日

插件作者:baianat

官网 演示 GitHub下载

hooper是适用于Vue.js的响应式,可自定义且启用触摸的轮播滑块。

特征:

  • 键盘支持
  • 鼠标滚轮支持
  • 响应断点
  • 自动播放
  • 垂直滚动
  • 无限滚动
  • 两路控制轮播(同步)
  • 使用插件完全可定制
  • 甚至更多……

安装和下载:

# Yarn
$ yarn add hooper

# NPM
$ npm install hooper --save

使用:

<template>
  <hooper>
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    ...
  </hooper>
<template>

<script>
  import { Hooper, Slide } from 'hooper';

  export default {
    name: 'App',
    components: {
      Hooper,
      Slide
    }
  }
</script>

可用Props

Props默认描述
itemsToShow1每个视图显示的项目数(可以是一个分数)。
itemsToSlide1使用导航按钮时要滑动的项目数。
initialSlide0初始幻灯片的索引号。
infiniteScrollfalse启用无限滚动模式。
centerModefalse启用中心模式。
verticalfalse启用垂直滑动模式。
rtlnull启用rtl模式。
mouseDragtrue切换鼠标拖动。
touchDragtrue切换触摸拖动。
wheelControltrue切换鼠标滚轮滑动。
keysControltrue切换键盘控件。
shortDragtrue启用任何动作即可提交幻灯片。
autoPlay false 启用自动滑动到轮播的功能。这可以动态更改。
playSpeed2000自动播放触发幻灯片的速度(以毫秒为单位)。
transition300滑动过渡时间(以毫秒为单位)。
sync使两个旋转木马同步滑动。
hoverPause true 如果鼠标进入幻灯片,则暂停autoPlay。
trimWhiteSpace false 仅在没有完全空的幻灯片空间时才限制转盘滑动。
settings{}通过所有设置的对象。

可用的CSS属性

另请参阅样式来设置滑块的来源。可以将初始样式导入为 @import '~hooper/dist/hooper.css';

属性默认描述
hooperheight200像素滑块的默认高度,设置为自动可根据内容缩放

相关插件