iDangerous Swiper插件在活動幻燈片上淡入淡出並在刷卡上淡出

我正在嘗試設置swiper，以便它在每張幻燈片中淡入淡出。iDangerous Swiper插件在活動幻燈片上淡入淡出並在刷卡上淡出

幻燈片看起來像這樣

<div class="swiper-slide"> 
      <img src="http://fpoimg.com/300x200?text=Promotion&bg_color=e6e6e6&text_color=ffffff" class="animated fadeInUp"/> 
      <div class="card-actions"> 
      Form field<br> 
      Button 
      </div> 
     </div>

我想這是正常滑動，而是與每個幻燈片類卡行動DIV褪色時，它是活動的幻燈片，然後當你開始滑動到下一張幻燈片，我希望它淡出。任何人有任何想法如何做到這一點？

來源

2015-04-12 Aaron

這裏是它的小提琴https://jsfiddle.net/od7m1q99/。它是否正確？似乎工作，但滑動很多，並從幻燈片來回是錯誤的。有時不顯示活動幻燈片div。 – Aaron

這裏還有一個循環設置爲true的測試，它根本不起作用https://jsfiddle.net/od7m1q99/1/ 什麼會導致循環無法工作？ – Aaron

您需要使用該回調，例如（jQuery的應包括）：

 
var swiper = new Swiper('.swiper-container', { 
    onSlideChangeEnd: function (swiper) { 
    $('.swiper-slide').each(function() { 
     if ($(this).index() === swiper.activeIndex) { 
      // Fadein in active slide 
      $(this).find('.card-actions').fadeIn(300); 
     } 
     else { 
      // Fadeout in inactive slides 
      $(this).find('.card-actions').fadeOut(300); 
     } 
    }); 
    } 
});

來源

2015-04-12 15:58:31

哇！這幾乎是完美的。當它第一次加載它顯示所有應該淡入的div。我試圖讓它顯示第一張幻燈片上的第一張，而不是其他人，直到你滑動。然後，當它們不在活動幻燈片上時，它們淡出。 – Aaron

我在這裏設置了一個jsfiddle https://jsfiddle.net/od7m1q99/並嘗試在onSlideChangeEnd之前添加onInit，onSliderMove，並且它似乎正在工作確定bur有時候它是有問題的，如果您來回滑動很多並且不顯示div爲活動幻燈片。這是正確的方式，我有這個或有沒有更好的辦法？ – Aaron

你爲什麼不修改組隊，探索影響參數褪色爲effect:fade。欲瞭解更多選項，請訪問Api Documentation。

來源

2017-07-03 06:02:21 Samiullah

iDangerous Swiper插件在活動幻燈片上淡入淡出並在刷卡上淡出

回答

相關問題