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

1

Basic

Basic usage.

      Loading...

1

Fade in

Slides use fade for transition.

      Loading...

Transform No LoopFlipFade (built-in)

1

Custom transition effect

Customize carousel transition effect by providing a class that extends NzCarouselBaseStrategy.

      Loading...

BottomTopLeftRight

1

Position

There are four positions available.

      Loading...

1

Scroll automatically

Timing of scrolling to the next card/picture.

      Loading...

1

Loop

Prevent the carousel to go in a loop

      Loading...

API#

nz-carouselcomponent#

Property	Description	Type	Default	Global Config
`[nzAutoPlay]`	Whether to scroll automatically	`boolean`	`false`	✅
`[nzAutoPlaySpeed]`	Duration (milliseconds), does not scroll when set to 0	`number`	`3000`	✅
`[nzDotRender]`	Dot render template	`TemplateRef<{ $implicit: number }>`	-
`[nzDotPosition]`	The position of the dots, which can be one of `topbottomleftright`	`string`	`bottom`	✅
`[nzDots]`	Whether to show the dots at the bottom of the gallery	`boolean`	`true`	✅
`[nzEffect]`	Transition effect	`'scrollx'\|'fade'`	`'scrollx'`	✅
`[nzEnableSwipe]`	Whether to support swipe gesture	`boolean`	`true`	✅
`[nzLoop]`	Whether to enable the carousel to go in a loop	`boolean`	`true`	✅
`(nzAfterChange)`	Callback function called after the current index changes	`EventEmitter<number>`	-
`(nzBeforeChange)`	Callback function called before the current index changes	`EventEmitter{ from: number; to: number }>`	-

Methods#

Name	Description
`goTo(slideNumber)`	Change current slide to given slide number
`next()`	Change current slide to next slide
`pre()`	Change current slide to previous slide

InjectionToken#

Token	Description	Parameters	Default Value
`NZ_CAROUSEL_CUSTOM_STRATEGIES`	Provide custom transitioning strategies	`CarouselStrategyRegistryItem[]`	-

Customizing transition effects#

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