Vue 3 轮播组件 - vue3-carousel

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,
},

变更日志:

v0.1.24 (06/21/2021)

  • 专长:添加状态类

v0.1.23 (06/21/2021)

  • 专长:切换鼠标/触摸拖动

v0.1.21(05/25/2021)

  • 修复溢出幻灯片

v0.1.19(05/05/2021)

  • 添加对自动播放的支持

v0.1.18(05/01/2021)

  • 更新

v0.1.17(04/25/2021)

  • 修复:删除幻灯片更新问题

v0.1.15(04/08/2021)

  • 修复:updateSlidesBuffer

v0.1.14(04/04/2021)

  • 更新

v0.1.13(03/22/2021)

  • 壮举:将轮播数据绑定到插槽

v0.1.11(01/16/2021)

  • 更新资料