A Vue 3 carousel component
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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 |
默认显示页 |
| 名称 | 类型 | 说明 |
|---|---|---|
| to | (index: number) => void |
滑动至某一页 |
| prev | () => void |
滑动至前一页 |
| next | () => void |
滑动至后一页 |
| getCurrentIndex | () => number |
获取当前页 |
| 名称 | 类型 | 说明 |
|---|---|---|
| change | () => number |
轮播切换时触发 |
| 名称 | 参数 | 说明 |
|---|---|---|
| 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 }) |
指示点 |
完善示例文档
轮播第一圈有间隙 / 纯色标签验证
跨页跳转动画 slie scroll
禁用循环播放时 最后一页到首页怎么跳
postcss
img 标签块行二象性
轮播图套娃
检查代码规范
相对路径改绝对路径
代码整理 文件结构整理
多张切换 / 一次切一组
加速轮播
css 瘦身 检查 z-index 必要性
重构代码展示组件 抽离到 npm
脱离 tdesign
单元测试
TypeScript
node
react
感谢我尊敬的大学室友 康斯坦丁·益铭王爵士 为本项目提供了诸多宝贵建议以及解决方案、特别是在解决 tdesign-site-components 库引入后导致 ssr 构建失败的问题上作出的杰出贡献。
他的 GitHub ⬇️
