AngularにSwiper.jsを導入する

# Swiper.jsとは
[Swiper.js](https://swiperjs.com/)、使ってますか？
webページ内に簡単にスライドショーを導入できるライブラリです。
よくお世話になっていたのですがAngularのデモがversion9から無くなってしまっていました……。
↓以前はReact,Vueに並んでAngularもありました

<img width="400" alt="スクリーンショット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607742/4647487d-67fa-39a9-bcfb-e6966013cb3e.png">

使えなくなったわけではなく、今後はElementの導入方法で利用する必要があるようです

# v9からのSwiperの導入
AngularCLIのバージョンは15.2.6,swiperのバージョンは9.2.4で動作確認していきます。
[Elementの導入についてのドキュメント](https://swiperjs.com/element)はこちら
まずはnpmでAngularプロジェクトにswiperをインストールします

```
$ npm i swiper
```

## app.module
```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // 追加
})
```

## app.components.ts
```ts
import { register } from 'swiper/element/bundle';
export class AppComponent implements OnInit {
  ngOnInit() {
    register();
  }
}
```

## app.component.html
[デモ](https://swiperjs.com/demos)のElementからサンプルをコピーします。

```html
<swiper-container
  class="mySwiper"
  pagination="true"
  pagination-dynamic-bullets="true"
>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide 4</swiper-slide>
  <swiper-slide>Slide 5</swiper-slide>
  <swiper-slide>Slide 6</swiper-slide>
  <swiper-slide>Slide 7</swiper-slide>
  <swiper-slide>Slide 8</swiper-slide>
  <swiper-slide>Slide 9</swiper-slide>
</swiper-container>
```
## app.component.scss
```scss
swiper-container {
  width: 60%;
  height: 300px;
}

swiper-slide {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
```

![スクリーンショット 2023-04-24 8.31.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607742/29f30f9a-f7db-3a30-bc6a-3a3a53f6e3de.png)

動かすだけであればこれで完了です。


# イベントをtsファイル側で検知する
実際実装する時には何かとイベントを使って色々したいことがあったりするかと思います。
今回はスライドが変わった時のイベントを取得する例を紹介します。

```html:app.component.html
<swiper-container
  #swiper
  class="mySwiper"
  pagination="true"
  pagination-dynamic-bullets="true"
>
```
#swiperを追加します

```ts:app.component.ts
  @ViewChild('swiper') swiper: any = null;

  ngAfterViewInit(): void {
     this.swiper.nativeElement.addEventListener('slidechange', (event: any) => {
       console.log(event);
     });
  }
```
ViewChildでスワイパーにイベントを追加します。
追加できるイベントは[ここ](https://swiperjs.com/swiper-api#events)を参照してください
![スクリーンショット 2023-04-24 9.31.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607742/dfa4b5ca-21d4-6d42-e2ac-f45f5e51c118.png)
スライドを動かすたびにイベントが取得されているのが確認できます。
event.detail[0].activeIndexで現在表示中のスライドがどれなのかとかもわかりますね。


# オプションを追加する
時には勝手に次のスライドに進んで欲しくないこともありますね。

```ts:app.component.ts
  @ViewChild('swiper') swiper: any = null;
  ngAfterViewInit(): void {
    const options: SwiperOptions = {
      allowSlideNext: false, // 次のスライドに行くことを許可しない
    };
    Object.assign(this.swiper.nativeElement, options);
  }
```
これでスライドを勝手に動かせなくなりました。

任意のタイミングで動かしたいときはslideNextで…
使用できるメソッドなどは[こちら](https://swiperjs.com/swiper-api#methods-and-properties)を参考にしてください。

```ts
  goNext() {
    this.swiper.nativeElement.allowSlideNext = true;　// 一旦オプションを解除する
    this.swiper.nativeElement.swiper.slideNext(1, 200); // スライドを動かす
    this.swiper.nativeElement.allowSlideNext = false; // オプションを戻す
  }
```