插件名称 | 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)
v0.1.14(04/04/2021)
v0.1.13(03/22/2021)
v0.1.11(01/16/2021)