最近在项目中多次使用轮播组件,包括很经典的Swiper组件,也自己写了一个类网易云音乐的轮播组件的实现。在这当中遇到了大大小小许多的坑,其中就不乏在使用Antd的时候的一个大坑,且网上都没有很好的解决方案。基于Antd是大家常用UI框架,决定在此写一篇博文来记录,防止大家在日后使用的时候在这里浪费时间了。
Antd的轮播组件叫Carousel(走马灯),正常的轮播组件都有给出轮播间隔和轮播速度的轮播配置例如Swiper,可Antd的轮播配置却显得异为简单:
Antd的默认轮播间隔是3s,轮播速度是0.5s,可是纵观API文档可以看到Antd并没有给出轮播间隔和轮播速度的配置。介此我去网上搜了一下,大部分的博文给出的关于此配置项的字段都是错误的。于是乎我去看了Antd的轮播实现
Antd的轮播是基于react-slick的 GitHub源码在 github.com/akiran/reac…
但在react-slick的文档也写得略为简略,想寻找参数入口也非常麻烦,因为它的参数入口真的不显眼
最后经过我的三层级寻找,终于找到了这个字段!
相同,调整轮播速度的字段为speed,项目亲测有效!真是太棒了,下面是我在项目中的配置:
之后大家在使用Antd的时候可以留意一下喔~