Carousel走马灯

走马灯，轮播图

代码演示

基本用法

最简单的用法。

import { Component } from '@angular/core';
@Component({
  selector: 'demo-carousel-basic',
  template: `
  <WingBlank>
    <Carousel [infinite]="true"
              [vertical]="false"
              [selectedIndex]="1"
              (beforeChange)="beforeChange($event)"
              (afterChange)="afterChange($event)"
    >
      <CarouselSlide *ngFor="let item of state.data">
        <div style="display: inline-block; width: 100%;" [ngStyle]="{'height': state.imgHeight}">
          <img src="https://zos.alipayobjects.com/rmsportal/{{item}}.png" style=" pointer-events: none; width: 100%;"/>
        </div>
      </CarouselSlide>
    </Carousel>
  </WingBlank>
  `
})
export class DemoCarouselBasicComponent {
  state = {
    data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
    imgHeight: '184px'
  };
  beforeChange(event) {
    console.log('slide ' + event.from + ' to ' + event.to);
  }
  afterChange(event) {
    console.log('slide to ' + event);
  }
}

子元素数量变化

子元素数量变化。

import { Component } from '@angular/core';
@Component({
  selector: 'demo-carousel-basic-dynamic',
  template: `
    <WingBlank>
      <div Button (onClick)="onClick1()">Click me to add child</div>
      <WhiteSpace></WhiteSpace>
      <Carousel [infinite]="true"
                (beforeChange)="beforeChange($event)"
                (afterChange)="afterChange($event)"
      >
        <CarouselSlide *ngFor="let item of state.data;let i = index" [ngStyle]="{'height': state.imgHeight}">
          <div style="display: inline-block; width: 100%;" [ngStyle]="{'height': state.imgHeight}">
            <img src="https://zos.alipayobjects.com/rmsportal/{{item}}.png" style="pointer-events: none; width: 100%;"/>
          </div>
        </CarouselSlide>
      </Carousel>
    </WingBlank>
  `
})
export class DemoCarouselBasicDynamicComponent {
  state = {
    data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
    imgHeight: '184px'
  };
  beforeChange(event) {
    console.log('slide ' + event.from + ' to ' + event.to);
  }
  afterChange(event) {
    console.log('slide to ' + event);
  }
  onClick1() {
    this.state.data.push('AiyWuByWklrrUDlFignR');
  }
}

竖向

import { Component } from '@angular/core';
@Component({
  selector: 'demo-carousel-vertical',
  template: `
    <WingBlank>
      <WhiteSpace></WhiteSpace>
        <Carousel class="my-carousel"
                  [autoplay]="true"
                  [infinite]="true"
                  [vertical]="true"
                  [dots]="false"
                  [dragging]="false"
        >
          <CarouselSlide *ngFor="let item of state.data">
            <div class="v-item">carousel {{item}}</div>
          </CarouselSlide>
        </Carousel>
    </WingBlank>
  `,
  styles: [
    `
      .my-carousel .v-item {
        height: 36px;
        line-height: 36px;
        padding-left: 10px;
      }
    `
  ]
})
export class DemoCarouselVerticalComponent {
  state = {
    data: ['1', '2', '3']
  };
}

抽奖

import { Component } from '@angular/core';
@Component({
  selector: 'demo-carousel-lottery',
  template: `
    <WingBlank>
      <WhiteSpace></WhiteSpace>
        <Carousel class="my-carousel"
                  [dots]="false"
                  [speed]="200"
                  [autoplay]="true"
                  [infinite]="true"
                  [vertical]="true"
                  [dragging]="false"
                  [autoplayInterval]="300"
        >
          <CarouselSlide *ngFor="let item of state.data;let i = index">
            <div class="v-item">carousel {{item}}</div>
          </CarouselSlide>
        </Carousel>
    </WingBlank>
  `,
  styles: [
    `
      .my-carousel .v-item {
        height: 36px;
        line-height: 36px;
        padding-left: 10px;
      }
    `
  ]
})
export class DemoCarouselLotteryComponent {
  state = {
    data: ['ring', 'ruby', 'iPhone', 'iPod', 'sorry', 'tourism', 'coke', 'ticket', 'note']
  };
}

API