Carousel

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

Angular Carousel の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

codesandbox で表示 Stackblitz で表示

使用方法

Carousel を全画面要素またはコンポーネントの子に設定できます。また、スライドに有効な HTML コンテンツ、その他の Angular コンポーネントなども含めることができます。

はじめに

Note

このコンポーネントでは、タッチ操作が正しく動作するために、アプリケーションのルート モジュールに HammerModule をインポートする必要があります。

次に、app.module.ts ファイルに IgxCarouselModule をインポートします。

// app.module.ts

...
import { IgxCarouselModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxCarouselModule],
    ...
})
export class AppModule {}

このセクションでは、上記で定義した デモ の設定を行います。

*ngFor を使用してスライドを追加する

同じ種類のコンテンツを含むスライドがある場合、最も簡単な方法は *ngFor を使用してテンプレートに追加する方法です。

スライドには画像のみが含まれるので、ts ファイルにオブジェクトの配列を作成し、それを使用して igx-carousel にスライドを追加します。

...
public slides = [
      {
        src: "/assets/images/carousel/ignite-ui-angular-indigo-design.png"
      },
      {
        src: "/assets/images/carousel/slider-image-chart.png"
      },
      {
        src: "/assets/images/carousel/ignite-ui-angular-charts.png"
      }
  ];
...

...
<div class="carousel-container">
    <igx-carousel #carousel>
            <igx-slide  *ngFor="let slide of slides;">
                <div class="image-container">
                    <img [src]="slide.src">
                </div>
             </igx-slide>
    </igx-carousel>
</div>
...

例

IgxCarousel の定義

デフォルトでは、カルーセルの loop 入力プロパティは true に設定されています (ループは、Next 動作でナビゲートするときに最初のスライドが最後のスライドの後に来るか、Previous 動作を使用して最後のスライドが最初のスライドの後に来るときに起こります)。ループ動作を無効にするには、loop 入力の値を false に設定します。

各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの 下部 に配置されるインジケーターがあります。この動作を変更するには、indicatorsOrientation プロパティを使用して、top に割り当てる必要があります。空のテンプレートを追加すると、インジケーターを無効にできます。

カルーセル テンプレートは以下のようになります。

<div class="carousel-container">
    <igx-carousel #carousel [loop]="false">
      ...  
        <!-- Adding an empty template to disable carousel's indicators -->
        <ng-template igxCarouselIndicator></ng-template>
    </igx-carousel>
</div>

カスタム インジケーター

カスタム カルーセル インジケーターを追加するには、以下のように IgxCarouselIndicatorDirective を使用する必要があります。

...
  <ng-template igxCarouselIndicator let-slide>
      <div [ngClass]="{'selected': slide.current === current}"></div>
  </ng-template>
...

カスタム nav ボタン

これを実現するために、IgxCarouselPrevButtonDirective と IgxCarouselNextButtonDirective ディレクティブを使用します。

...
    <ng-template igxCarouselNextButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_next</igx-icon>
        </button>
    </ng-template>

    <ng-template igxCarouselPrevButton let-disabled>
        <button igxButton="fab" igxRipple="white" [disabled]="disabled">
            <igx-icon fontSet="material">navigate_before</igx-icon>
        </button>
    </ng-template>
...

他のコンポーネントを含むスライド

このカルーセルには、フォームと画像を含むスライドが含まれます。

...
  <div class="carousel-container">
    <igx-carousel>
        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/SignUp.svg">
                <form #form class="signInForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>person</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Username</label>
                        <input igxInput id="username" type="text" />
                    </igx-input-group>
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>lock</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="password">Password</label>
                        <input igxInput id="password" type="password" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="raised" type="submit" (click)="form.reset()">Sign In</button>
                </div>
            </div>
        </igx-slide>

        <igx-slide>
            <div class="slide-content-wrapper">
                <img src="assets/images/svg/carousel/Route.svg">
                <form #form2 class="searchForm">
                    <igx-input-group>
                        <igx-prefix>
                            <igx-icon>search</igx-icon>
                        </igx-prefix>
                        <label style="display: flex;" igxLabel for="username">Search</label>
                        <input igxInput id="search" type="text" />
                    </igx-input-group>
                </form>
                <div class="btn">
                    <button igxButton="raised" type="submit" (click)="form2.reset()">Search</button>
                </div>
            </div>
        </igx-slide>
    </igx-carousel>
</div>
...

デモ

codesandbox で表示 StackBlitz で表示

アニメーション

アニメーション化されたスライド遷移により、エンドユーザーはカルーセルを操作しているときに高いエクスペリエンスを得ることができます。

デフォルトでカルーセルは slide アニメーションを使用するように設定されていますが、代替アニメーションとして fade もサポートしています。

アニメーションは animationType入力を介して構成されます。

<igx-carousel animationType="fade">
...
</igx-carousel>

animationType 入力に none を設定すると、カルーセルのアニメーションが無効になります。

デモ

以下のデモは、カルーセルがサポートするさまざまなタイプのアニメーションを示しています。

codesandbox で表示 StackBlitz で表示

ナビゲーション

トランジションとナビゲーションは、最も重要なカルーセル機能です。

カルーセル内のナビゲーションは、モバイル デバイスでのナビゲーション ボタン、キーボード ナビゲーション、パン操作を通じてユーザーが処理できます。

パン ジェスチャ

デフォルトでカルーセルはあらゆるタッチ対応デバイスに使用できます。これはオプションであり、gesturesSupport プロパティを false に設定して変更できます。

カルーセル アニメーションはタッチ デバイスで完全にサポートされているため、プラットホームに合わせてプログレッシブ Web アプリケーション (PWA) を構築するための完璧なツールです。

キーボード ナビゲーション

• 次へ/前へのスライドに移動するには、丁寧に使用する必要があります。
  • 右矢印キー - 次のスライド
  • 左矢印キー - 前のスライド
• 最後/最初のスライドに移動するには丁寧に使用する必要があります。
  • End キー - 最後のスライド
  • Home キー - 最初のスライド

自動的なトランジション

IgxCarousel は、ユーザーの操作なしでスライドを自動的に変更するように簡単に構成できます。この方法では、トランジション間隔を interval プロパティに設定するだけで、スライドショーを作成できます。このプロパティは、スライド トランジション間の間隔 (ミリ秒)を決定します。

Note

自動的なスライド トランジションは、デフォルトでユーザーに完全に依存しているわけではありません。スライドの上にマウス ポインターを置くと、マウス ポインターがスライド領域から出るまで、現在のスライド トランジションが中断されます。これは、pause プロパティを false に設定することで防止できます。

高度な例

ループを有効にして完全に自動化されたカルーセルを作成しましょう。各スライドは、リスト内のリスト項目 と同期されます。リスト項目をクリックすると、スライドの変更がトリガーされます。

これを実現するには、カルーセルを以下のように構成する必要があります。

• gesturesSupport を無効にします。
• ナビゲーション ボタンを無効にします。
• カルーセルのインジケーターを無効にします。
• ユーザーがスライドを操作すると pause を無効にします。
• トランジション間隔を追加します。

カルーセル テンプレートは以下のようになります。

...
<div class="carousel-wrapper">
    <igx-carousel [navigation]="false" [pause]="false" animationType="fade" [interval]="2000" [gesturesSupport]="false">
        <div class="slides-wrapper">
            <igx-slide *ngFor="let item of slides">
                  <!-- Slides content goes here -->
             </igx-slide>
        </div>
        <!-- Adding an empty template to disable carousel's indicators -->
        <ng-template igxCarouselIndicator></ng-template>
    </igx-carousel>
</div>
...

カルーセル構成の準備ができました。次に、リスト コンポーネントを追加して、両方のコンポーネントを同期します。

IgxList の追加:

...
<div class="list-wrapper">
    <igx-list displayDensity="compact">
      <!-- Adding disabled classes when the list item index does not match the current slide index-->
        <igx-list-item *ngFor="let item of slides; let i=index" [ngClass]="{'disabled': i !== currentIndex }" >
      <!-- List item content goes here -->
        </igx-list-item>
    </igx-list>
</div>
...

カルーセルの onSlideChanged およびリストの onItemClicked イベントを処理し、コンポーネントを同期する方法:

  public ngOnInit() {
    ...
    this.list.onItemClicked.subscribe((args: IListItemClickEventArgs) => {
        this.currentIndex = args.item.index;
        this.carousel.select(this.carousel.get(this.currentIndex));
    });

    this.carousel.onSlideChanged.subscribe((args: ISlideEventArgs) => {
        this.currentIndex = args.slide.index;
    });
  }

これらの構成の結果は以下のようになります。

codesandbox で表示 Stackblitz で表示

API リファレンス

• IgxCarouselComponent
• IgxCarouselComponent スタイル
• IgxSlideComponent
• IgxListComponent
• IgxListItemComponent

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)