vue 自定义轮播组件_针对Vue优化的可自定义轮播滑块

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:

第一步是使用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...

  甚至更多...

使用胡珀 (Use Hooper)

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

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

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

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 自定义轮播组件