Carousel走马灯

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

何时使用

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

代码演示

Carousel走马灯 - 图1

基本

最简单的用法。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-carousel-basic',
  4. template: `
  5. <nz-carousel [nzEffect]="effect">
  6. <div nz-carousel-content *ngFor="let index of array">
  7. <h3>{{ index }}</h3>
  8. </div>
  9. </nz-carousel>
  10. `,
  11. styles: [
  12. `
  13. [nz-carousel-content] {
  14. text-align: center;
  15. height: 160px;
  16. line-height: 160px;
  17. background: #364d79;
  18. color: #fff;
  19. overflow: hidden;
  20. }
  21. h3 {
  22. color: #fff;
  23. margin-bottom: 0;
  24. }
  25. `
  26. ]
  27. })
  28. export class NzDemoCarouselBasicComponent {
  29. array = [1, 2, 3, 4];
  30. effect = 'scrollx';
  31. }

Carousel走马灯 - 图2

渐显

切换效果为渐显。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-carousel-fade',
  4. template: `
  5. <nz-carousel [nzEffect]="'fade'">
  6. <div nz-carousel-content *ngFor="let index of array">
  7. <h3>{{ index }}</h3>
  8. </div>
  9. </nz-carousel>
  10. `,
  11. styles: [
  12. `
  13. [nz-carousel-content] {
  14. text-align: center;
  15. height: 160px;
  16. line-height: 160px;
  17. background: #364d79;
  18. color: #fff;
  19. overflow: hidden;
  20. }
  21. h3 {
  22. color: #fff;
  23. margin-bottom: 0;
  24. }
  25. `
  26. ]
  27. })
  28. export class NzDemoCarouselFadeComponent {
  29. array = [1, 2, 3, 4];
  30. }

Carousel走马灯 - 图3

位置

位置有 4 个方向。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-carousel-position',
  4. template: `
  5. <nz-radio-group [(ngModel)]="dotPosition">
  6. <label nz-radio-button nzValue="bottom">Bottom</label>
  7. <label nz-radio-button nzValue="top">Top</label>
  8. <label nz-radio-button nzValue="left">Left</label>
  9. <label nz-radio-button nzValue="right">Right</label>
  10. </nz-radio-group>
  11. <nz-carousel [nzDotPosition]="dotPosition">
  12. <div nz-carousel-content *ngFor="let index of array">
  13. <h3>{{ index }}</h3>
  14. </div>
  15. </nz-carousel>
  16. `,
  17. styles: [
  18. `
  19. nz-radio-group {
  20. margin-bottom: 8px;
  21. }
  22. [nz-carousel-content] {
  23. text-align: center;
  24. height: 160px;
  25. line-height: 160px;
  26. background: #364d79;
  27. color: #fff;
  28. overflow: hidden;
  29. }
  30. h3 {
  31. color: #fff;
  32. margin-bottom: 0;
  33. }
  34. `
  35. ]
  36. })
  37. export class NzDemoCarouselPositionComponent {
  38. array = [1, 2, 3, 4];
  39. dotPosition = 'bottom';
  40. }

Carousel走马灯 - 图4

自动切换

定时切换下一张。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-carousel-autoplay',
  4. template: `
  5. <nz-carousel nzAutoPlay>
  6. <div nz-carousel-content *ngFor="let index of array">
  7. <h3>{{ index }}</h3>
  8. </div>
  9. </nz-carousel>
  10. `,
  11. styles: [
  12. `
  13. [nz-carousel-content] {
  14. text-align: center;
  15. height: 160px;
  16. line-height: 160px;
  17. background: #364d79;
  18. color: #fff;
  19. overflow: hidden;
  20. }
  21. h3 {
  22. color: #fff;
  23. margin-bottom: 0;
  24. }
  25. `
  26. ]
  27. })
  28. export class NzDemoCarouselAutoplayComponent {
  29. array = [1, 2, 3, 4];
  30. }

API

nz-carouselcomponent

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

方法

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

InjectionToken

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

自定义切换效果

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