Carousel走马灯

旋转木马,一组轮播的区域。

何时使用#

  • 当有一组平级的内容。

  • 当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。

  • 常用于一组图片或卡片轮播。

代码演示

API#

参数说明类型默认值版本
afterChange切换面板的回调function(current)-
autoplay是否自动切换booleanfalse
beforeChange切换面板的回调function(from, to)-
dotPosition面板指示点位置,可选 top bottom left rightstringbottom
dots是否显示面板指示点,如果为 object 则同时可以指定 dotsClass 或者boolean | { className?: string }true
easing动画效果stringlinear
effect动画效果函数scrollx | fadescrollx

方法#

名称描述
goTo(slideNumber, dontAnimate)切换到指定面板, dontAnimate = true 时,不使用动画
next()切换到下一面板
prev()切换到上一面板

更多 API 可参考:https://react-slick.neostack.com/docs/api

Card卡片Collapse折叠面板