vue 自定义轮播组件
胡珀 (Hooper) Vue.js carousal component, optimized to work with Vue.
Vue.js旋转组件,经过优化可与Vue一起使用。
View Demo 查看演示 Download Source 下载源 入门 (Getting started)
安装 (Installation)
First step is to install it using yarn
or npm
:
【vue|vue 自定义轮播组件_针对Vue优化的可自定义轮播滑块】 第一步是使用yarn
或npm
安装它:
npm install hooper# or use yarn
yarn add hooper
特征 (Features)
- Touch support
触控支持
- Keyboard support
键盘支持
- Mouse wheel support
鼠标滚轮支持
- Responsive breakpoints
响应断点
- Auto play
自动播放
- Vertical scroll
垂直滚动
- Infinite scroll
无限滚动
- Two way control carousels (sync)
两路控制轮播(同步)
- Fully customizable using addons
使用插件完全可定制
- And even more...
甚至更多...
slide 1slide 2...
more info at Documentation
更多信息,请参见文档
可用道具 (Available Props)
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 |
infiniteScroll |
false | enable infinite scrolling mode. |
centerMode |
false | enable center mode |
vertical |
false | enable vertical sliding mode |
rtl |
false | enable rtl mode |
mouseDrag |
true | toggle mouse dragging |
touchDrag |
true | toggle touch dragging |
wheelControl |
false | toggle mouse wheel sliding |
keysControl |
false | toggle keyboard control |
shortDrag |
true | enable any move to commit a slide |
autoPlay |
false | enable auto sliding to carousal |
playSpeed |
3000 | speed of auto play to trigger slide in ms |
transition |
300 | sliding transition time in ms |
sync |
'' | sync two carousels to slide together |
settings |
{ } | an object to pass all settings |
Struts | 默认 | 描述 |
---|---|---|
itemsToShow |
1个 | 每个视图显示的项目数(可以是一个分数)。 |
itemsToSlide |
1个 | 使用导航按钮时要滑动的项目数 |
infiniteScroll |
假 | 启用无限滚动模式。 |
centerMode |
假 | 启用中心模式 |
vertical |
假 | 启用垂直滑动模式 |
rtl |
假 | 启用rtl模式 |
mouseDrag |
真正 | 切换鼠标拖动 |
touchDrag |
真正 | 切换触摸拖动 |
wheelControl |
假 | 切换鼠标滚轮滑动 |
keysControl |
假 | 切换键盘控制 |
shortDrag |
真正 | 启用任何动作即可提交幻灯片 |
autoPlay |
假 | 启用自动滑动到旋转 |
playSpeed |
3000 | 自动播放触发幻灯片的速度(毫秒) |
transition |
300 | 滑动过渡时间(以毫秒为单位) |
sync |
'' | 同步两个旋转木马一起滑动 |
settings |
{} | 通过所有设置的对象 |
翻译自: https://vuejsexamples.com/a-customizable-carousel-slider-optimized-for-vue/vue 自定义轮播组件
推荐阅读
- Java|Java基础——数组
- 人工智能|干货!人体姿态估计与运动预测
- java简介|Java是什么(Java能用来干什么?)
- Java|规范的打印日志
- Linux|109 个实用 shell 脚本
- 程序员|【高级Java架构师系统学习】毕业一年萌新的Java大厂面经,最新整理
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- Spring注解驱动第十讲--@Autowired使用
- SqlServer|sql server的UPDLOCK、HOLDLOCK试验