Vue.js 3的全功能轮播组件 - vue-carousel

Vue.js 3的全功能轮播组件 - vue-carousel
插件名称 vue-carousel
版本号 v1.0.6
发布时间 2021年1月31日
插件作者 fengyuanchen

专为Vue.js 3应用程序设计的功能齐全,高度可定制,适合移动设备的轮播(滑块)组件。

安装和下载:

# NPM
$ npm i vue @vue/compiler-sfc @chenfengyuan/vue-carousel

如何使用它:

1.导入并注册轮播组件。

import Vue from 'vue';
import VueCarousel from '@chenfengyuan/vue-carousel';
const app = Vue.createApp({});
app.component(VueCarousel.name, VueCarousel);

2.将轮播组件添加到应用模板。

<template>
  <vue-carousel :data="data"></vue-carousel>
</template>

3.将幻灯片添加到轮播中。

export default {
  data() {
    return {
      data: [
        '<div class="slide">Slide 1</div>',
        '<div class="slide">Slide 2</div>',
        '<div class="slide">Slide 3</div>',
      ],
    };
  },
};

4.将自己的样式应用于幻灯片。

.slide {
  align-items: center;
  background-color: #222;
  color: #fff;
  display: flex;
  justify-content: center;
}

5.可能的组件道具以定制轮播。

autoplay: {
  type: Boolean,
  default: true,
},
controls: { // false, true, hover
  type: [Boolean, String],
  default: 'hover',
},
data: {
  type: Array,
  default: undefined,
},
direction: { // left, right, up, down
  type: String,
  default: 'left',
},
indicators: { // false, true, hover
  type: [Boolean, String],
  default: true,
},
indicatorTrigger: { // click, hover
  type: String,
  default: 'click',
},
indicatorType: { // line, disc  
  type: String,
  default: 'line',
},
interval: {
  type: Number,
  default: 5000,
},
pauseOnEnter: {
  type: Boolean,
  default: true,
},
slideOnSwipe: {
  type: Boolean,
  default: true,
},
tag: {
  type: String,
  default: 'div',
},

6. API方法。

// play 
play();

// pause
stop();

// 返回上一张幻灯片
prev();

// 转到下一张幻灯片
next();

// 幻灯片到特定幻灯片
slideTo(index);

7.事件。

// 当幻灯片切换开始时。
@slide(newIndex, oldIndex)

// 幻灯片转换完成后。
@slid(newIndex, oldIndex)