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.
import { NzCarouselModule } from 'ng-zorro-antd/carousel';

Examples

API#

nz-carousel#

PropertyDescriptionTypeDefaultGlobal Config
[nzAutoPlay]Whether to scroll automaticallybooleanfalse
[nzAutoPlaySpeed]Duration (milliseconds), does not scroll when set to 0number3000
[nzDotRender]Dot render templateTemplateRef<{ $implicit: number }>-
[nzDotPosition]The position of the dots, which can be one of topbottomleftrightstringbottom
[nzDots]Whether to show the dots at the bottom of the gallerybooleantrue
[nzEffect]Transition effect'scrollx'|'fade''scrollx'
[nzEnableSwipe]Whether to support swipe gesturebooleantrue
[nzLoop]Whether to enable the carousel to go in a loopbooleantrue
(nzAfterChange)Callback function called after the current index changesEventEmitter<number>-
(nzBeforeChange)Callback function called before the current index changesEventEmitter{ from: number; to: number }>-

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

InjectionToken#

TokenDescriptionParametersDefault Value
NZ_CAROUSEL_CUSTOM_STRATEGIESProvide custom transitioning strategiesCarouselStrategyRegistryItem[]-

Customizing transition effects#

You can provide strategies that extends NzCarouselBaseStrategy to implement custom transition effects.