Angularでswiperを使おうとしたが躓いた話

7144 ワード
Angular swiper Angular テキストリンク

Angularでswiperが動いてくれない！！

Angularにて、swiperを使ってスライドショー的なやつを作成しようと、
この記事を参考として、実装しようと試みたが、「＜」「＞」を押しても
まったく反応してくれず、いろいろと試した結果、どうにか反応してくれたので、
その結果を残しておく。

ちなみに各バージョンは、下記の通りDeath!
Angular：10.1.6
swiper ：6.3.4

結論

swiperのslideNextメソッド呼べば動く。

component.ts側

slideNext():void{
    this.swiper.slideNext();
  }
html側
 <div class="swiper-button-next" (click)="slideNext()"></div>

やったこと

まずはHTML側にお決まりの構成を記述。

 <div class="swiper-container columns is-centered">
    <div class="swiper-wrapper column is-6">
      <div class="swiper-slide">slider1</div>
      <div class="swiper-slide">slider2</div>
    </div>
    <div class="swiper-button-next" (click)="slideNext()"></div>
    <div class="swiper-button-prev" (click)="slidePrev()"></div>
  </div>

そしてcomponent.ts側の初期処理でswiperインスタンスの生成とプロパティ設定

ngOnInit(): void {
    this.swiper = new swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }

上記の記載で、スワイプによる切り替わりは動くものの、
「＜」「＞」ボタン押下での切り替わりがされない。。。

Google先生に質問したところ、下記サイトにたどり着く。
https://stackoverflow.com/questions/49810045/swiper-not-working-in-angular-5

先生の翻訳内容を見た限り、発生している内容が同じ。
そして、ベストアンサーには、HTMLが読み込まれる前に、swiperが初期化され、
設定が無いことになってんじゃねーの？だから、表示された後に生成しちゃえYO!
とのことらしいので、上記のngOnInit()ではなく、ngAfterViewInit()でインスタンス生成してみた。


 ngAfterViewInit() {
    this.swiper = new swiper('.swiper-container', {
      loop: true,
      navigation: {
        nextEl:   '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
}

うん、動かないね！デバッグで追ってみた感じ、別に初期化されてるわけでも無さそう！
てか、そもそもswiper側で何してるの？と疑問に思ったので、見てみたところ

/node_modules/swiper/swiper-bundle.js

 onNextClick: function onNextClick(e) {
      var swiper = this;
      e.preventDefault();
      if (swiper.isEnd && !swiper.params.loop) return;
      swiper.slideNext();
    },

なるほどなぁ、うんうん。。。。slideNext呼べばよくね？
という事で、初めに書いた結論となります。

最後まで読んでいただき、ありがとうございます。

そんなことせんでも、もっと良いやり方あるぞ！
というご意見、アドバイス絶賛募集中です！
よろしくお願いいたします