@kagol/vue-carousel

Vue Carousel

一个简单、灵活的Vue3走马灯组件，非常轻量，只有5kB。

预览地址： https://kagol.github.io/vue-carousel/

快速开始

创建一个vite工程：

npm create vite vite-demo --template vue-ts

安装Carousel：

npm install @kagol/vue-carousel

在main.ts中引入Carousel：

import Carousel from '@kagol/vue-carousel'
import '@kagol/vue-carousel/dist/style.css'

createApp(App)
.use(Carousel)
.mount('#app')

在App.vue中使用：

<Carousel>
  <div class="carousel-item">page 1</div>
  <div class="carousel-item">page 2</div>
  <div class="carousel-item">page 3</div>
</Carousel>

效果动图

默认效果：

掘金活动：

指示器位置：

自定义指示器：

分页器位置：

自定义分页器：

华为官网：

QQ音乐：

B站：

手风琴式折叠卡片：

API

Carousel 组件

props

属性	类型	默认	说明
v-model	Number	1	可选，当前页码
autoplay	Boolean	true	可选，是否自动播放
interval	Number	3000	可选，自动播放的时间间隔，单位是毫秒

插槽

属性	类型	默认	说明
default	--	--	必选，默认插槽
indicator	--	--	可选，指示器插槽
pagination	--	--	可选，分页器插槽

CarouselIndicator 组件

props

属性	类型	默认	说明
v-model	Number	1	可选，当前页码
count	Number	--	可选，指示器元素数量

插槽

属性	类型	默认	说明
default	({ pageIndex, setPageIndex }) => {}	--	可选，默认插槽

CarouselPrev 组件

插槽

属性	类型	默认	说明
default	--	--	可选，默认插槽

CarouselNext 组件

插槽

属性	类型	默认	说明
default	--	--	可选，默认插槽

参考：

用积木理论设计的Carousel组件都有哪些有趣的玩法？