swiper 動的に画像を追加したい

ページ再読み込みではなく、動的にswiperの画像を追加し、違和感なく1番最後にスライドによって現れるようにしたいけど、swiperの各メソッドの挙動が分からない。

DOMで直接タグを操作して、その後update()を実行した場合

具体的には、ページ表示時は、AとBの画像が交互にスライドしていて、Cの画像を最後に追加する

$('.swiper-wrapper').append('<div class="swiper-slide"><img src="Cの画像" alt="lifethings"></div>');
mySwiper.update();

B -> A -> Cのローテーション(A -> B -> Cではない)を繰り返すようになる。

swiperのappendSlideメソッドで画像を追加した場合

同じく、ページ表示時は、AとBの画像が交互にスライドしていて、Cの画像を最後に追加する

mySwiper.appendSlide('<div class="swiper-slide"><img src="Cの画像" alt="lifethings"></div>');

1巡目以外のAを表示中にCを追加した場合は、追加した瞬間にCが表示され、C -> A -> Bの順にローテーションされる。それ以外の時にCを追加した場合は、綺麗に、A -> B -> Cの順にローテーションする。
う~ん、不思議な挙動だ。。。

1度全ての画像を削除後に、追加しなおす場合

// 一旦、全ての画像を削除
mySwiper.removeAllSlides();

mySwiper.appendSlide('<div class="swiper-slide"><img src="Aの画像" alt="lifethings"></div>');
mySwiper.appendSlide('<div class="swiper-slide"><img src="Bの画像" alt="lifethings"></div>');
mySwiper.appendSlide('<div class="swiper-slide"><img src="Cの画像" alt="lifethings"></div>');

1巡目のAで全削除、A, B, Cを追加すると、Cに画像が切り替わり、C -> A -> Bの順にローテーションされる。
1巡目のB の場合も同じ。

2巡目のAの場合、違和感なく、A -> B -> Cのローテーションとなる。
2巡目のBの場合、Cに切り替わり、C -> A -> Bのローテーションとなる。

う~ん、結局どういう仕様なのか分からない。。。
順番を気にせず、動的に画像を切り替えたいなら、直接DOMを触ってupdate()でもappendSlide()でも可能だと思う。しかし、順番に従って表示したい場合のやり方が分からない。。。

結局、現在表示されている画像に変更があればリロードするようにした。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です