iDangerous Swiper initialSlide設定

Question

私たちのウェブサイトのモバイル版では、iDangerous Swiper（2.4.3）を使用して製品イメージを表示し、デスクトップバージョンではカルーセルを使用しています。

両方のバージョンで同じデータベースクエリが使用されているため、モバイル版ではdekstop版と同じ画像と注文が使用されます。

私たちが達成したいもの：他の開始画像を表示したいモバイルバージョン。 iDangerous Swiper（2.4.3）が特定の開始スライドまたはオフセット-1スライドを持つための方法はありますか（それは最後の画像から始まります）。このようにして、特定の開始イメージを最後のイメージとしてアップロードし、そのイメージをモバイル上で初めて表示させることができます。

HTML/PHPモバイル版：

<div class="swiper-container product-slider"> 
    <div class="swiper-wrapper"> 

    <?php foreach ($product['carrousel'] as $x => $item):?> 

     <div class="swiper-slide"> 
      <figure class="swiper-slide-img"> 
       <img src="<?php echo $item['image_url']; ?>" alt="<?php echo strip_tags($product['title']); ?>"/> 
      </figure> 
     </div> 

    <?php endforeach; ?> 
</div> 

HTML出力モバイル：

<div class="swiper-container product-slider done"> 
     <div class="swiper-wrapper" style="width: 2484px; transform: translate3d(-414px, 0px, 0px); transition-duration: 0s; height: 229px;"><div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;"> 
      <figure class="swiper-slide-img"> 
       <img src="" alt=""> 
      </figure> 
     </div> 


     <div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 414px; height: 229px;"> 
      <figure class="swiper-slide-img"> 
       <img src="" alt=""> 
      </figure> 
     </div> 


     <div class="swiper-slide" style="width: 414px; height: 229px;"> 
      <figure class="swiper-slide-img"> 
       <img src="" alt=""> 
      </figure> 
     </div> 


     <div class="swiper-slide" style="width: 414px; height: 229px;"> 
      <figure class="swiper-slide-img"> 
       <img src="" alt=""> 
      </figure> 
     </div> 


     <div class="swiper-slide" style="width: 414px; height: 229px;"> 
      <figure class="swiper-slide-img"> 
       <img src="" alt=""> 
      </figure> 
     </div> 

     <div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;"> 
      <figure class="swiper-slide-img"> 
       <img src="" alt=""> 
      </figure> 
     </div> 
    </div> 

部分的な解決策：

idangerous.swiper.min.jsで設定が見つかりました：initialSlide。

-1に変更すると、スライダーはモバイルの最後のスライドで開始します。

私は、次のui.jsに追加しました：アクティブクラスを取得doesntの最後のページネーション（この場合は、アクティブ1）：

initSliders: function() { 

     $('.swiper-container').each(function(){ 

      var paginationContainer = '.' + $(this).next().attr('class'); 

      if($(this).hasClass('product-slider')) { 
       var mySwiper = $(this).swiper({ 
       mode:'horizontal', 
       loop: true, 
       initialSlide: -1, 
       pagination: paginationContainer, 
       calculateHeight: true 
       }); 
      } else { 
       var mySwiper = $(this).swiper({ 
       mode:'horizontal', 
       loop: true, 
       initialSlide: 0, 
       pagination: paginationContainer, 
       calculateHeight: true 
       }); 
      } 

      $(this).addClass('done'); 
      $(this).next().addClass('swiper-ready'); 

     }); 

    }, 

問題。スワイプするとアクティブなページネーションクラスがすぐに取得され、すぐに現在アクティブなページングクラスに切り替わります。ロードオン

：スワイプした後

<div class="swiper-pagination swiper-ready"> 
     <span class="swiper-pagination-switch"></span> 
     <span class="swiper-pagination-switch"></span> 
     <span class="swiper-pagination-switch"></span> 
     <span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span> 
    </div> 

：

 <div class="swiper-pagination swiper-ready"> 
     <span class="swiper-pagination-switch"></span> 
     <span class="swiper-pagination-switch"></span> 
     <span class="swiper-pagination-switch"></span> 
     <span class="swiper-pagination-switch"></span> 
    </div> 

/スワイプをドラッグしながら

<div class="swiper-pagination swiper-ready"> 
     <span class="swiper-pagination-switch"></span> 
     <span class="swiper-pagination-switch"></span> 
     <span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span> 
     <span class="swiper-pagination-switch"></span> 
    </div> 

Answer 1

ソリューション

 initSliders: function() { 

     $('.swiper-container').each(function(){ 

      var paginationContainer = '.' + $(this).next().attr('class'); 

      if($(this).hasClass('product-slider')) { 
       var mySwiper = $(this).swiper({ 
       mode:'horizontal', 
       loop: true, 
       initialSlide: -1, 
       pagination: paginationContainer, 
       calculateHeight: true 
       }); 

       $(this).next().find(".swiper-pagination-switch:last").addClass("swiper-visible-switch swiper-active-switch"); 

      } else { 
       var mySwiper = $(this).swiper({ 
       mode:'horizontal', 
       loop: true, 
       initialSlide: 0, 
       pagination: paginationContainer, 
       calculateHeight: true 
       }); 
      } 

      $(this).addClass('done'); 
      $(this).next().addClass('swiper-ready'); 

     });