Carousel 走马灯

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

何时使用 #

  • 当有一组平级的内容。

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

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

代码演示

最简单的用法。

切换效果为渐显。

垂直显示。

定时切换下一张。

API

参数 说明 类型 默认值
[nz-carousel-content] 用于标识滚动的slide内容 Directive -
nzEffect 动画效果函数，可取 scrollx, fade String scrollx
nzDots 是否显示面板指示点 Boolean true
nzVertical 垂直显示 Boolean false
nzAutoPlay 是否自动切换 Boolean false
nzAutoPlaySpeed 自动切换速度, 单位毫秒 Number 3000
nzPauseOnHover 鼠标悬停暂停 Boolean true
nzAfterChange 切换面板后的回调, 参数为当前索引 Function(number) 无
nzBeforeChange 切换面板前的回调, 参数为当前的索引与被切换到的索引 {{ 'Function({ form: number; to: number})' }} 无

Methods 使用方法

方法名 参数 说明 返回值
nzSlickNext 无 切换到下一个面板 无
nzSlickPrev 无 切换到上一个面板 无
nzSlickGoTo index: number 切换到指定索引面板 无