• Carousel走马灯
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-carouselcomponent
        • 方法
      • InjectionToken
      • 自定义切换效果

    Carousel走马灯

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

    何时使用

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

    单独引入此组件

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

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

    位置

    位置有 4 个方向。

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

    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

    nz-carouselcomponent

    参数说明类型默认值版本
    [nzAutoPlay]是否自动切换booleanfalse
    [nzAutoPlaySpeed]切换时间(毫秒)，当设置为0时不切换number3000
    [nzDotRender]Dot渲染模板TemplateRef<{ $implicit: number }>-
    [nzDotPosition]面板指示点位置，可选 topbottomleftrightstringbottom8.0.0
    [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 类（默认的两种切换效果同样基于该类）。