Carousel走马灯

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

何时使用#

  • 当有一组平级的内容。
  • 当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。
  • 常用于一组图片或卡片轮播。
import { NzCarouselModule } from 'ng-zorro-antd/carousel';

代码演示

API#

nz-carousel#

参数说明类型默认值支持全局配置
[nzAutoPlay]是否自动切换booleanfalse
[nzAutoPlaySpeed]切换时间(毫秒),当设置为 0 时不切换number3000
[nzDotRender]Dot 渲染模板TemplateRef<{ $implicit: number }>-
[nzDotPosition]面板指示点位置,可选 topbottomleftrightstringbottom
[nzDots]是否显示面板指示点booleantrue
[nzEffect]动画效果函数,可取 scrollx, fade'scrollx'|'fade''scrollx'
[nzEnableSwipe]是否支持手势划动切换booleantrue
[nzLoop]是否支持循环booleantrue
(nzAfterChange)切换面板的回调EventEmitter<number>-
(nzBeforeChange)切换面板的回调EventEmitter<{ from: number; to: number }>-

方法#

名称描述
goTo(slideNumber)切换到指定面板
next()切换到下一面板
pre()切换到上一面板

InjectionToken#

Token说明参数默认值
NZ_CAROUSEL_CUSTOM_STRATEGIES提供用户自定义的切换效果CarouselStrategyRegistryItem[]-

自定义切换效果#

你可以提供自定义的切换效果,切换效果应当继承 NzCarouselBaseStrategy 类(默认的两种切换效果同样基于该类)。