Carousel

A carousel component. Scales with its container.

When To Use#

  • When there is a group of content on the same level.
  • When there is insufficient content space, it can be used to save space in the form of a revolving door.
  • Commonly used for a group of pictures/cards.

Examples

API#

Import this Component Individually#

You can get more detail here.

import { NzCarouselModule } from 'ng-zorro-antd';
PropertyDescriptionTypeDefault
[nzAutoPlay]Whether to scroll automaticallybooleanfalse
[nzAutoPlaySpeed]Duration (milliseconds), does not scroll when set to 0number3000
[nzDots]Whether to show the dots at the bottom of the gallerybooleantrue
[nzDotRender]Dot render templateTemplateRef<{ $implicit: number }>-
[nzEffect]Transition effect'scrollx'|'fade''scrollx'
[nzVertical]Whether to use a vertical displaybooleanfalse
(nzAfterChange)Callback function called after the current index changesEventEmitter<number>-
(nzBeforeChange)Callback function called before the current index changesEventEmitter{ from: number; to: number }>-
[nzEnableSwipe]Whether to support swipe gesturebooleantrue

Methods#

NameDescription
goTo(slideNumber)Change current slide to given slide number
next()Change current slide to next slide
pre()Change current slide to previous slide