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