Ignite UI for Angular Carousel コンポーネントは、ネイティブ Angular コンポーネントです。画像ギャラリー、カード、チュートリアル、またはページごとのインターフェイスでスライド コレクションをブラウズ、移動できます。

使用方法

カルーセルを全画面要素またはコンポーネントの子に設定できます。また、スライドに有効な HTML コンテンツ、その他の Angular コンポーネントなども含めることができます。Ignite UI for Angular Carousel を初期化する前に、IgxCarouselModuleapp.module.ts ファイルにインポートします。

// app.module.ts
...
import { IgxCarouselModule } from 'igniteui-angular';
@NgModule({
    ...
    imports: [..., IgxCarouselModule],
    ...
})
export class AppModule {}

次に、カルーセル コンポーネントのテンプレートに以下のマークアップを追加し、2 つのスライドとその HTML コンテンツを定義します。

<!-- app.component.html -->
<igx-carousel>
    <igx-slide>
        <h3>Ignite UI for Angular</h3>
        <p>30+ Material-based Angular components to code speedy web apps faster.</p>
    </igx-slide>
    <igx-slide>
        <h3>Ignite UI for Javascript</h3>
        <p>A complete JavaScript UI component library giving you the ability to build data-rich responsive web apps.</p>
    </igx-slide>
</igx-carousel>

このコードはカルーセルをページでインスタンス化します。

ngFor ディレクティブを使用したスライドの表示

実環境シナリオでスライドをマークアップに宣言する代わりに動的に読み込みます。この方法を説明するためにコードでスライドを提供します。

  // app.component.ts
  public slides: any[] = [];
  constructor() { }

  public ngOnInit() {
     this.addNewSlide();
  }

  public addNewSlide() {
      this.slides.push(
        { description: "30+ Material-based Angular components to code speedy web apps faster.",
          heading: "Ignite UI for Angular",
          image: "assets/images/carousel/slide1-angular.png"},
        { description: "A complete JavaScript UI library empowering you to build data-rich responsive web apps.",
          heading: "Ignite UI for Javascript",
          image: "assets/images/carousel/slide2-ignite.png"}
      );
  }

次に igx-slide に ngFor ディレクティブを追加して HTML コンテンツを提供します。各スライドに画像も追加します。

<!-- app.component.html -->
<igx-carousel #carousel>
    <igx-slide *ngFor="let slide of slides;">
        <h3>{{slide.heading}}}</h3>
        <p>{{slide.description}}}</p>
        <img [src]="slide.image">
    </igx-slide>
</igx-carousel>

ここまででカルーセルは動作しますが、更に外観を変更してみます。最も重要なナビゲーション機能にスタイルを追加するために [前へ] および [次へ] 矢印のデフォルト色を変更し、カルーセル コンテンツを中央揃えにします。

/* app.component.css */
.igx-carousel__inner {
    width: 100%;
    text-align: center; 
}
a > igx-icon > span{
    color: #e41c77;
}

スタイルの適用後、矢印が強調表示され、コンテンツが中央揃えになります。

ナビゲーション

ナビゲーションおよびトランジションは最も重要なカルーセル機能です。トランジション期間、自動再生、および停止機能を要件に応じて構成できます。この機能は、公開されたプロパティによって管理できます。ユーザーの注意をそらさないよう自動再生を無効にし、操作によって停止を有効にして、ループ化 (最初のスライドが最後のスライドの後になること) を有効にします。

<!-- app.component.html -->
<igx-carousel #carousel [loop]="loop" [pause]="pause">
...
</igx-carousel>

上記のスニペットで、プロパティ バインディングを使用して loop および pause 要素プロパティに値を設定します。オプションのプロパティには、スライド変更の間隔をミリ秒単位で設定する interval があります。コンテンツがカルーセルに自動的に変更される代わりに、ユーザーの操作によって変更されるために、このプロパティを設定しません。コンポーネントのプロパティ値が以下のコードによって設定されます。注: 自動再生を無効にするには、カルーセルの stop メソッドを呼び出します。

  // app.component.ts
  public loop = true;
  public pause = true;

  constructor() { }

  public ngOnInit() {
     this.addNewSlide();
     // stops the auto playing
     this.carousel.stop();
  }

プロパティを構成した後、ユーザーはカルーセルのコンテンツを変更できます。次にナビゲーションをカスタマイズし、カルーセルのインジケーターをプログレス バーと置き換えます。onSlideChanged イベントを処理し、IgxLinearProgressBar コンポーネントを使用して進行状況を示す UI を追加します。最初、IgxLinearProgressBar モジュールをインポートします。

// app.component.ts
import { Direction, IgxCarousel, IgxLinearProgressBar } from 'igniteui-angular';

モジュールをインポートした後、IgxLinearProgressBar をテンプレートに追加します。max プロパティを app.component.ts ファイルで定義される total プロパティの値に設定します。onSlideChanged イベントのハンドラーを追加し、進行状況のテキストを追加します。

<!-- app.component.html -->
<igx-carousel #carousel [loop]="loop" pause="false" (onSlideChanged)="onSlideChanged(carousel)">
    <igx-slide *ngFor="let slide of slides;">
        <h3>{{slide.heading}}</h3>
        <p>{{slide.description}}</p>
        <img [src]="slide.image">
    </igx-slide>
    <igx-linear-bar #linearbar [max]="total"></igx-linear-bar>
    <span>{{current}} out of {{total}}</span>
</igx-carousel>

total および current プロパティの値を ngOnInit で更新し、リニア バーの値を onSlideChanged イベント ハンドラーで更新します。

// app.component.ts
  @ViewChild("carousel") public carousel: IgxCarousel;
  @ViewChild("linearbar") public linearbar: IgxLinearProgressBar;

  public total: number;
  public current: number;

  constructor() { }

  public ngOnInit() {
     this.addNewSlide();
     this.carousel.stop();
     this.total = this.slides.total;
     this.current = this.carousel.current;
  }

  public onSlideChanged(carousel: IgxCarousel) {
    this.current = carousel.current + 1;
    this.linearbar.value = carousel.current + 1;
  }

プログレス バーがパーセンテージ値を表示しますが、カスタム インジケーター テキストを追加したため、このパーセンテージ値を表示する必要がありません。このパーセンテージ値およびカルーセルの元のインジケーターを非表示にします。

/* app.component.css */
span.progress-linear__value {
    display: none;
}
ul.igx-carousel__indicators {
    display: none;
}

すべての手順を実行すると、ナビゲーション矢印を使用してユーザーが管理するカルーセルになります。リニア バーが進行状況のインジケーターになります。

タップ / クリックでのアクション

カルーセルがホーム ページ コンテンツを表示しています。ただし、スライドとのユーザー インタラクション ハンドラーを実装する必要があります。ユーザーがスライドにクリック/タップしたとき、カルーセルが新しいページまたはビューに移動することが予期されます。これには、移動するルートを設定します。ヘッダーを IgxButton と置き換え、ボタンのクリック イベントにイベント ハンドラーを追加します。

<!-- app.component.html-->
<igx-slide *ngFor="let slide of slides;">
    <span igxButton="raised" igxButtonColor="white" 
        igxButtonBackground="#e41c77" (click)="goTo(carousel.current)">{{slide.heading}}</span>
    <p>{{slide.description}}</p>
    ...
</igx-slide>

IgxButtonModuleapp.component.ts に追加します。goto() 関数は Angular ルーターを使用してその他のビューに移動します。

  // app.component.ts
  import { Router } from "@angular/router";
  import { Direction, IgxButtonModule, IgxCarousel, IgxLinearProgressBar } from 'igniteui-angular';
  ...

  export class AppComponent implements OnInit {
  ...
  constructor(private router: Router) { }

  public goTo(index: number) {
    this.router.navigate(["/details", index]);
  }

これを構成した後、ルーターが URL を指定した /details:index ルート パスと一致させ、相対するページを表示します。

API