vue-carousel|基于 Vue.js 的轮播图组件库

vue-carousel 是一个基于 Vue.js 的轮播图组件库，提供了多种轮播图的展示方式，并且支持无限循环、自动播放、响应式等特性。

vue-carousel 的主要特性：

• 多种展示方式：支持纵向和横向两种展示方式，而横向展示方式又分为单行展示、多行展示和分页展示三种。
• 无限循环：支持轮播图的无限循环播放。
• 自动播放：支持自动播放，并且可以设置自动播放的时间间隔。
• 响应式：支持响应式，可以根据容器的大小调整轮播图的展示方式和尺寸。
• 懒加载：支持懒加载功能，可以延迟加载轮播图的图片，减少页面加载时间。
• 丰富的API：提供了丰富的API，可以方便地控制轮播图的行为和样式。
• 可定制性高：可以通过配置参数和样式自定义轮播图的外观和行为。

使用方法

安装

如果您想使用vue-carousel，首先您需要安装它，命令如下：

npm install vue-carousel
// 或者使用yarn
yarn add vue-carousel
		

使用

全局引入

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);			
		

在局部组件中引入

import { Carousel, Slide } from 'vue-carousel';

export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};			
		

配置参数

vue-carousel组件的配置参数如下：

• adjustableHeight: 设置是否根据每个轮播项的高度来自适应容器高度。默认值为false。
• adjustableHeightEasing: 设置自适应高度时的缓动函数。默认值为null，表示使用默认缓动函数。
• autoplay: 设置是否自动播放。默认值为false。
• autoplayDirection: 设置自动播放的方向。默认值为'forward'。
• autoplayHoverPause: 设置鼠标悬停时是否暂停自动播放。默认值为true。
• autoplayTimeout: 设置自动播放的时间间隔，单位为毫秒。默认值为2000。
• centerMode: 设置是否启用居中模式。默认值为false。
• easing: 设置轮播的缓动函数。默认值为'cubic-bezier(0.25, 0.1, 0.25, 1.0)'。
• loop: 设置是否循环播放。默认值为true。
• minSwipeDistance: 设置滑动距离的最小值，单位为像素。默认值为8。
• mouseDrag: 设置是否允许使用鼠标拖动进行轮播。默认值为true。
• navigateTo: 设置导航按钮是否跳转到对应的轮播项。默认值为null，表示不跳转。
• navigationClickTargetSize: 设置导航按钮的点击目标区域大小，单位为像素。默认值为8。
• navigationEnabled: 设置是否启用导航按钮。默认值为true。
• navigationNextLabel: 设置下一页导航按钮的标签。默认值为'›'。
• navigationPrevLabel: 设置上一页导航按钮的标签。默认值为'‹'。
• paginationActiveColor: 设置当前页码的颜色。默认值为'#000'。
• paginationColor: 设置页码的颜色。默认值为'#efefef'。
• paginationPosition: 设置页码的位置，可选值为bottom, bottom-overlay, top 和 top-overlay。默认值为'bottom'。
• paginationEnabled: 设置是否启用页码。默认值为true。
• paginationPadding: 设置页码之间的间距，单位为像素。默认值为10。
• paginationSize: 设置页码的大小，单位为像素。默认值为10。
• perPage: 设置每页显示的轮播项数量。默认值为2。
• perPageCustom: 设置每页显示的轮播项数量的自定义规则。默认值为null，表示使用默认规则。
• resistanceCoef: 设置滑动阻力系数。默认值为20。
• scrollPerPage: 设置是否按页滚动。默认值为true。
• spacePadding：设置轮播图每个slide之间的间距。默认值为0。
• spacePaddingMaxOffsetFactor：设置间距的最大值，与轮播图的宽度相乘。默认为0。
• speed：设置轮播图的切换速度，单位为毫秒。默认值为500。
• tagName：设置轮播图外层包裹元素的标签名。默认为'slide'。
• touchDrag：设置是否允许用手指拖动轮播图进行切换。默认为true。
• value：设置轮播图初始展示的slide的下标值。默认为0。

事件

vue-carousel支持下面的一些事件：

• navigation-click: 当轮播图的导航按钮被点击时触发的事件。
• pagination-click: 当轮播图的分页器按钮被点击时触发的事件。
• page-change: 当轮播图的当前页码发生变化时触发的事件。
• slide-click: 当轮播图的某个slide被点击时触发的事件。
• transition-start: 当轮播图的过渡动画开始时触发的事件。
• transition-end: 当轮播图的过渡动画结束时触发的事件。

这些事件都可以在vue-carousel的组件中通过@事件名的方式进行监听，例如：@slide-click="handleSlideClick"。具体的事件处理函数需要在组件中定义。

github网址：https://github.com/SSENSE/vue-carousel