ページ再読み込みではなく、動的に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()でも可能だと思う。しかし、順番に従って表示したい場合のやり方が分からない。。。
結局、現在表示されている画像に変更があればリロードするようにした。