Angularでswiperが動いてくれない!!
Angularにて、swiperを使ってスライドショー的なやつを作成しようと、
この記事を参考として、実装しようと試みたが、「<」「>」を押しても
まったく反応してくれず、いろいろと試した結果、どうにか反応してくれたので、
その結果を残しておく。
ちなみに各バージョンは、下記の通りDeath!
Angular:10.1.6
swiper :6.3.4
結論
swiperのslideNextメソッド呼べば動く。
slideNext():void{
this.swiper.slideNext();
}
<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側で何してるの?と疑問に思ったので、見てみたところ
onNextClick: function onNextClick(e) {
var swiper = this;
e.preventDefault();
if (swiper.isEnd && !swiper.params.loop) return;
swiper.slideNext();
},
なるほどなぁ、うんうん。。。。slideNext呼べばよくね?
という事で、初めに書いた結論となります。
最後まで読んでいただき、ありがとうございます。
そんなことせんでも、もっと良いやり方あるぞ! というご意見、アドバイス絶賛募集中です! よろしくお願いいたします