iDangerous Swiper initialSlide-Einstellung

Question

Für die mobile Version unserer Website verwenden wir den iDangerous Swiper (2.4.3), um Produktbilder anzuzeigen, und für die Desktop-Version verwenden wir ein Karussell.

Die mobile Version verwendet dieselben Bilder und dieselbe Reihenfolge wie unsere Dekstop-Version, da beide Versionen die gleiche Datenbankabfrage verwenden.

Was wir erreichen wollen: Die mobile Version wollen wir ein anderes Startbild anzeigen. Gibt es eine Möglichkeit für den iDangerous Swiper (2.4.3), eine bestimmte Folie für den Start oder den Versatz von -1 zu haben (so beginnt er mit dem letzten Bild). Auf diese Weise kann ich das spezifische Startbild für das Handy als letztes Bild hochladen und dieses zuerst nur auf dem Handy anzeigen lassen.

HTML/PHP Mobil-Version:

<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-Ausgabe Mobil:

<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> 

Teillösung:

In idangerous.swiper.min.js fand ich die Einstellung: initialSlide.

Wenn Sie -1 ändern, wird der Schieberegler mit der letzten Folie in Mobile gestartet.

Ich habe hinzugefügt folgendes 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'); 

     }); 

    }, 

Problem: Die letzte Paginierung (in diesem Fall der aktiven) tut die aktive Klasse zu erhalten. Nur beim Wischen erhält er kurz die aktive Paginierungsklasse und schaltet dann sofort auf die aktuell aktive um.

Auf Last:

 <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> 

Während des Ziehens/klauen:

<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> 

Nach Swipe:

<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

Lösung

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

     });