Angular のカルーセル

1. Angular のカルーセル
2. Angular カルーセルを作成する

angular-response-carousel とそれを使用してカルーセルを作成する方法を紹介します。

Angular のカルーセル

現在、カルーセルは、Web サイト開発者が Web サイトで使用する最も人気のあるデザイン要素です。カルーセルは、エンドユーザーにとって視覚的に魅力的な方法で情報を即座に表示します。

Angular のあるマテリアルカルーセルは、1つまたは複数の画像を一緒に表示します。これらの画像は、ボタンをクリックするか、あるフレームから別のフレームにスワイプすることで、自動的に回転または手動で回転します。

また、これらのカルーセルは、ホームページまたはその他のページで水平方向と垂直方向に作成できます。

Angular カルーセルを使用する理由

Angular カルーセルは、Ali Express、Amazon、その他多くの企業で利用されています。

これらのバナーはこれらの Web サイトの概要を提供するため、ユーザーの注意を引くのは簡単です。彼らは彼らにとってより魅力的です。

それらは、ウェブサイトのマーケティングおよび広告の代替手段として機能します。また、数秒以内にユーザーの興味を予測します。

最終的に、見栄えのするものはよく売れます。

Angular カルーセルを作成する

まず、angular-response-carousel ライブラリをインストールします。このライブラリをインストールするには、コマンドラインを使用できます。

# angular CLI
npm i angular-responsive-carousel

ライブラリをインストールしたら、このライブラリの依存関係 tslib をインストールする必要があります。それでは、コマンドラインを使用してインストールしましょう。

# angular CLI
npm i tslib

次のステップでは、app.module.ts に IvyCarouselModule をインポートし、クラス内のインポートに IvyCarouselModule を追加する必要があります。

したがって、app.module.ts は次のようになります。

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {IvyCarouselModule} from 'angular-responsive-carousel';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule, IvyCarouselModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

次のステップでは、コンテンツを app.component.html ファイルに追加します。

# angular
<carousel>
  <div class="carousel-cell">
    <img
      src="https://images.pexels.com/photos/10358193/pexels-photo-10358193.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
    />
  </div>
  <div class="carousel-cell">
    <img
      src="https://images.pexels.com/photos/10358193/pexels-photo-10358193.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
    />
  </div>
  <div class="carousel-cell">
    <img
      src="https://images.pexels.com/photos/10358193/pexels-photo-10358193.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
    />
  </div>
</carousel>

出力：

carousel タグを使用して、必要な数のカルーセルを作成できます。carousel タグ内で、クラス carousel-cell の div に画像を追加する必要があります。

このライブラリの最も良い点は、多くの作業を行う必要がないことです。ライブラリをインポートし、ライブラリクラスを使用して画像を追加できます。これにより、完全に機能し、応答性の高いカルーセルが作成されます。