Swiper でページの動的追加

javascript でスワイプを実現する Swiper

予めページ数が決まっていれば、その形で設計すればいいんだろうけど、日付みたいに無限にスワイプさせたい事はよくある話

onSlideChangeEnd イベントで、末尾の場合は後ろに div を追加、先頭の場合は div を挿入(2ページ目へ戻す)という手順
あたりまえですが、最初に最低でも3枚は必要になり、initialSlide: 1 で中央のを選択しておきます
次々と div セクションが追加されるので、あまりにページが多い場合は、逆の端から削除するのがよいかもね

<html>
<head>
 <link rel="stylesheet" href="idangerous.swiper.css">
 <script src="idangerous.swiper.js"></script>
 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   var MCount = 0;
   var mySwiper = new Swiper('.swiper-container', {
     mode:'horizontal',
     initialSlide: 1,
     loop: false,

     onSlideChangeEnd: function(){

      if(mySwiper.activeIndex == 0){
       // 先頭に挿入
       MCount--;
       $(".swiper-wrapper").prepend('<div class="swiper-slide" style="background: #eeeeff;">' + String(MCount) + '</div>');
       mySwiper.reInit();
       mySwiper.swipeTo(1, 0, null); 
      }else{
       var slidepanels = $(".swiper-wrapper").children('div');
       if (slidepanels.length -1 ==  mySwiper.activeIndex){
        // 末尾に追加
        $(".swiper-wrapper").append('<div class="swiper-slide" style="background: #eeeeff;">' + String(mySwiper.activeIndex + 1) + '</div>');
        mySwiper.reInit();
       }
      }

     }
    });
  });
 
 </script>
</head>
<body>
<hr />

<div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide" style="background: #f7eeee;">
   0
  </div>

  <div class="swiper-slide" style="background: #eeffee;">
   1
  </div>

  <div class="swiper-slide" style="background: #eeeeff;">
   2
  </div>
 </div>
</div>

<hr />
</body></html>

IT漂着メモ

Swiper でページの動的追加

コメント