Carousel

A carousel component. Scales with its container.
Import
Source components/carousel
Docs Edit this page

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#

20.3.0

API#

PropertyDescriptionTypeDefaultGlobal ConfigVersion
[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 topbottomleftright'top' | 'right' | 'bottom' | 'left''bottom'✅
[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✅
[nzArrows]Whether to show the arrow buttonsbooleanfalse-20.3.0
(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.