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 | 默认 | 描述 |
---|---|---|
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 | 自动播放触发幻灯片的速度(以毫秒为单位)。 |
transition | 300 | 滑动过渡时间(以毫秒为单位)。 |
sync | ” | 使两个旋转木马同步滑动。 |
hoverPause | true | 如果鼠标进入幻灯片,则暂停autoPlay。 |
trimWhiteSpace | false | 仅在没有完全空的幻灯片空间时才限制转盘滑动。 |
settings | {} | 通过所有设置的对象。 |
另请参阅样式来设置滑块的来源。可以将初始样式导入为 @import '~hooper/dist/hooper.css';
类 | 属性 | 默认 | 描述 |
---|---|---|---|
hooper | height | 200像素 | 滑块的默认高度,设置为自动可根据内容缩放 |