iDangerous组队，探索initialSlide设置

Question

对我们网站的移动版本，我们使用iDangerous组队，探索（2.4.3），以显示产品图片和桌面版本中，我们使用一个旋转木马。

移动版使用相同的图像和秩序作为我们dekstop版本，因为 两个版本使用相同的数据库查询。

/* 
    * Carrousel 
    */ 
    $q = " 
     SELECT 
      c.id, 
      CONCAT('" . Config::get(array("paths","uri-products")) . $product_id . "/',c.image_url) as image_url 
     FROM 
      product_carrousel c 
     WHERE 
      c.product_id = '" . $product_id . "' 
     ORDER BY 
      c.order ASC 
     "; 

    $r["carrousel"] = $this->db->select($q); 

我们想要实现的：我们想要显示其他启动图像的移动版本。有没有办法让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如下：

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"></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 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 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'); 

     });