Vue 3 轮播组件 - vue3-carousel

插件名称	vue3-carousel
版本号	v0.1.24
发布时间	2021年1月5日
插件作者	ismail9k

适用于Vue.js 3的应用程序的轻量级，现代，响应快速的轮播组件。

下载安装:

# Yarn
$ yarn add vue3-carousel

# NPM
$ npm i vue3-carousel

如何使用它：

1.导入并注册组件。

import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';

export default {
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
};

2.将轮播组件添加到应用程序。而已。

<template>
  <carousel>
    <slide v-for="slide in 10" :key="slide">{{ slide }}</slide>
    <template #addons>
      <navigation />
    </template>
  </carousel>
</template>

3.定制轮播的可能 props 。

// count of items to showed per view
itemsToShow: {
  default: 1,
  type: Number,
},
// slide number number of initial slide
currentSlide: {
  default: 0,
  type: Number,
},
// control infinite scrolling mode
wrapAround: {
  default: false,
  type: Boolean,
},
// control snap position alignment
snapAlign: {
  default: 'center',
  validator(value: string) {
    // The value must match one of these strings
    return ['start', 'end', 'center'].includes(value);
  },
},
// sliding transition time in ms
transition: {
  default: 300,
  type: Number,
},
// an object to pass all settings
settings: {
  default() {
    return {};
  },
  type: Object,
},
// an object to store breakpoints
breakpoints: {
  default: null,
  type: Object,
},