Carousel走马灯

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

何时使用#

  • 当有一组平级的内容。

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

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

代码演示

API#

参数说明类型默认值版本
afterChange切换面板的回调function(current)
autoplay是否自动切换booleanfalse
beforeChange切换面板的回调function(from, to)
dotPosition面板指示点位置,可选 top bottom left rightstringbottom3.17.0
dots是否显示面板指示点booleantrue
easing动画效果stringlinear
effect动画效果函数,可取 scrollx, fadestringscrollx

方法#

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

更多参数可参考:https://github.com/akiran/react-slick

Card卡片Collapse折叠面板