Swiper でページの動的追加

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

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

onSlideChangeEnd イベントで、末尾の場合は後ろに div を追加、先頭の場合は div を挿入(2ページ目へ戻す)という手順
あたりまえですが、最初に最低でも3枚は必要になり、initialSlide: 1 で中央のを選択しておきます
次々と div セクションが追加されるので、あまりにページが多い場合は、逆の端から削除するのがよいかもね
view plainprint?
  1. <html>  
  2. <head>  
  3.  <link rel="stylesheet" href="idangerous.swiper.css">  
  4.  <script src="idangerous.swiper.js"></script>  
  5.  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>  
  6.  <script type="text/javascript">  
  7.   $(document).ready(function(){  
  8.    var MCount = 0;  
  9.    var mySwiper = new Swiper('.swiper-container', {  
  10.      mode:'horizontal',  
  11.      initialSlide: 1,  
  12.      loop: false,  
  13.   
  14.      onSlideChangeEnd: function(){  
  15.   
  16.       if(mySwiper.activeIndex == 0){  
  17.        // 先頭に挿入  
  18.        MCount--;  
  19.        $(".swiper-wrapper").prepend('<div class="swiper-slide" style="background: #eeeeff;">' + String(MCount) + '</div>');  
  20.        mySwiper.reInit();  
  21.        mySwiper.swipeTo(1, 0, null);   
  22.       }else{  
  23.        var slidepanels = $(".swiper-wrapper").children('div');  
  24.        if (slidepanels.length -1 ==  mySwiper.activeIndex){  
  25.         // 末尾に追加  
  26.         $(".swiper-wrapper").append('<div class="swiper-slide" style="background: #eeeeff;">' + String(mySwiper.activeIndex + 1) + '</div>');  
  27.         mySwiper.reInit();  
  28.        }  
  29.       }  
  30.   
  31.      }  
  32.     });  
  33.   });  
  34.    
  35.  </script>  
  36. </head>  
  37. <body>  
  38. <hr />  
  39.   
  40. <div class="swiper-container">  
  41.  <div class="swiper-wrapper">  
  42.   <div class="swiper-slide" style="background: #f7eeee;">  
  43.    0  
  44.   </div>  
  45.   
  46.   <div class="swiper-slide" style="background: #eeffee;">  
  47.    1  
  48.   </div>  
  49.   
  50.   <div class="swiper-slide" style="background: #eeeeff;">  
  51.    2  
  52.   </div>  
  53.  </div>  
  54. </div>  
  55.   
  56. <hr />  
  57. </body></html>  

コメント

コメントを投稿