Vue3-carousel-component NPM | npm.io

1.0.0-alpha.13 • Published 1 month ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

1 month ago

vue3-carsouel-component

A Vue 3 carousel component

API

Carousel Props

参数	类型	默认值	说明
direction	`'horizontal' \\| 'vertical'`	`'horizontal'`	轮播图显示的方向
effect	`'scroll' \\| 'fade' \\| 'slide'`	`'fade'`	轮播图切换时的过渡效果
turnDirection	`boolean`	`true`	轮播方向
showDots	`'always' \\| 'hover' \\| 'never'`	`'hover'`	是否展示指示点
showArrow	`'always' \\| 'hover' \\| 'never'`	`'hover'`	是否显示箭头按钮
slidesPerView	`number`	`1`	每一页显示的轮播图数量
spaceBetween	`number`	`0`	轮播图之间的间距
interval	`number`	`4000`	自动播放的间隔（ms）
transitionStyle	`string`	`undefined`	过渡效果的样式
autoplay	`boolean`	`true`	是否自动播放
dotPlacement	`string`	`'bottom'`	轮播指示点位置
arrowPlacement	`string`	`'center'`	轮播箭头位置
dotType	`'line' \\| 'dot'`	`'line'`	轮播指示点样式
delay	`number`	`0`	延时播放时间
loop	`boolean`	`true`	是否循环播放
trigger	`string`	`click`	触发切换的方式
defaultIndex	`number`	`0`	默认显示页

Carousel Methods

名称	类型	说明
to	`(index: number) => void`	滑动至某一页
prev	`() => void`	滑动至前一页
next	`() => void`	滑动至后一页
getCurrentIndex	`() => number`	获取当前页

Carousel Events

名称	类型	说明
change	`() => number`	轮播切换时触发

Carousel Slots

名称	参数	说明
default	`()`	轮播的内容
arrow	`(info: { total: number, currentIndex: number, to: (index: number) => void, prev: () => void, next: () => void })`	箭头
dots	`(info: { total: number, currentIndex: number, to: (index: number) => void })`	指示点

Bugs && 待检验

完善示例文档

轮播第一圈有间隙 / 纯色标签验证

跨页跳转动画 slie scroll

禁用循环播放时最后一页到首页怎么跳

后续更新计划

检查代码规范

相对路径改绝对路径

代码整理文件结构整理

多张切换 / 一次切一组

加速轮播

css 瘦身检查 z-index 必要性

重构代码展示组件抽离到 npm

脱离 tdesign

单元测试

TypeScript

node

react

致谢

感谢我尊敬的大学室友康斯坦丁·益铭王爵士为本项目提供了诸多宝贵建议以及解决方案、特别是在解决 tdesign-site-components 库引入后导致 ssr 构建失败的问题上作出的杰出贡献。

他的 GitHub ⬇️

carousel vue3 scroll slide fade

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago