Carousel走马灯

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

何时使用

  • 当有一组平级的内容。
  • 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
  • 常用于一组图片或卡片轮播。

代码演示

Carousel走马灯 - 图1

基本

最简单的用法。

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

Carousel走马灯 - 图2

渐显

切换效果为渐显。

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

Carousel走马灯 - 图3

垂直

垂直显示。

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

Carousel走马灯 - 图4

自动切换

定时切换下一张。

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

API

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

  1. import { NzCarouselModule } from 'ng-zorro-antd';

nz-carouselcomponent

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

方法

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