ng-ytl-zorro-antd/src/showcase/nz-demo-carousel/nz-demo-carousel.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown"><h1>Carousel 走马灯</h1>
    <section class="markdown"><p>旋转木马，一组轮播的区域。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <ul>
        <li><p>当有一组平级的内容。</p></li>
        <li><p>当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。</p></li>
        <li><p>常用于一组图片或卡片轮播。</p></li>
      </ul>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'基本'" id="components-carousel-demo-basic" [nzCode]="NzDemoCarouselBasicCode">
        <nz-demo-carousel-basic demo></nz-demo-carousel-basic>
        <div intro>
          <p>最简单的用法。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'渐现'" id="components-carousel-demo-fade" [nzCode]="NzDemoCarouselFadeCode">
        <nz-demo-carousel-fade demo></nz-demo-carousel-fade>
        <div intro>
          <p>切换效果为渐显。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'垂直'" id="components-carousel-demo-vertical" [nzCode]="NzDemoCarouselVerticalCode">
        <nz-demo-carousel-vertical demo></nz-demo-carousel-vertical>
        <div intro>
          <p>垂直显示。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自动切换'" id="components-carousel-demo-auto" [nzCode]="NzDemoCarouselAutoCode">
        <nz-demo-carousel-auto demo></nz-demo-carousel-auto>
        <div intro>
          <p>定时切换下一张。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <table>
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>[nz-carousel-content]</td>
        <td>用于标识滚动的slide内容</td>
        <td>Directive</td>
        <td>-</td>
      </tr>
      <tr>
        <td>nzEffect</td>
        <td>动画效果函数，可取 scrollx, fade</td>
        <td>String</td>
        <td>scrollx</td>
      </tr>
      <tr>
        <td>nzDots</td>
        <td>是否显示面板指示点</td>
        <td>Boolean</td>
        <td>true</td>
      </tr>
      <tr>
        <td>nzVertical</td>
        <td>垂直显示</td>
        <td>Boolean</td>
        <td>false</td>
      </tr>
      <tr>
        <td>nzAutoPlay</td>
        <td>是否自动切换</td>
        <td>Boolean</td>
        <td>false</td>
      </tr>
      <tr>
        <td>nzAutoPlaySpeed</td>
        <td>自动切换速度, 单位毫秒</td>
        <td>Number</td>
        <td>3000</td>
      </tr>
      <tr>
        <td>nzPauseOnHover</td>
        <td>鼠标悬停暂停</td>
        <td>Boolean</td>
        <td>true</td>
      </tr>
      <tr>
        <td>nzAfterChange</td>
        <td>切换面板后的回调, 参数为当前索引</td>
        <td>Function(number)</td>
        <td>无</td>
      </tr>
      <tr>
        <td>nzBeforeChange</td>
        <td>切换面板前的回调, 参数为当前的索引与被切换到的索引</td>
        <td>{{ 'Function({ form: number; to: number})' }}</td>
        <td>无</td>
      </tr>
      </tbody>
    </table>

    <h2>
      <span>Methods</span>
      <small><a href="https://angular.cn/guide/component-interaction">使用方法</a></small>
    </h2>
    <table>
      <thead>
      <tr>
        <th>方法名</th>
        <th>参数</th>
        <th>说明</th>
        <th>返回值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>nzSlickNext</td>
        <td>无</td>
        <td>切换到下一个面板</td>
        <td>无</td>
      </tr>
      <tr>
        <td>nzSlickPrev</td>
        <td>无</td>
        <td>切换到上一个面板</td>
        <td>无</td>
      </tr>
      <tr>
        <td>nzSlickGoTo</td>
        <td>index: number</td>
        <td>切换到指定索引面板</td>
        <td>无</td>
      </tr>
      </tbody>
    </table>
  </section>
</article>