Flexslider +燈箱2畫廊圖像加倍問題

Question

我使用flexslider和每個幻燈片lightbox 2圖像庫內。

問題是，當我設置flexslider「animationLoop：true」燈箱時，首次和最後一張幻燈片畫廊圖像翻倍。

當我設置「animationLoop：false」時，問題消失了。

我注意到問題來自flexslider「克隆」幻燈片。 Flexslider「克隆」最後一張和第一張幻燈片 - 創建「循環」效果。同一時間，燈箱拿起「真正的」幻燈片+「克隆」幻燈片，生成所有必需的畫廊 - 並將第一張和最後一張幻燈片的圖像加倍。

有沒有人得到簡單的解決方案來解決這個問題 - 因爲我想在Flexslider中使用這個Loop效果文件？！

下面是使用幻燈片內的「animationLoop：true」和「clone」幻燈片+ lightbox 2的flexslider示例代碼。

$('#customers-carousel').flexslider({ 
         animation: "slide", 
         controlNav: false, 
         directionNav: true, 
         animationLoop: true, 
         slideshow: false, 
         prevText: "",  
         nextText: "", 
         itemMargin: 0, 
         itemWidth: 300 
        }) 

<div class="flex-viewport"> 
<ul class="slides"> 
    <li class="clone"> 
     <p><a href="images/image-4.png" rel="lightbox" data- lightbox="gallery4" data-title="title-image-4"><img src="images/image-4-thumb.png"></a></p> 
    </li> 
    <li> 
     <p><a href="images/image-1.png" rel="lightbox" data-lightbox="gallery1" data-title="title-image-1"><img src="images/image-1-thumb.png"></a></p> 
    </li> 
    <li> 
     <p><a href="images/image-2.png" rel="lightbox" data-lightbox="gallery2" data-title="title-image-2"><img src="images/image-2-thumb.png"></a></p> 
    </li> 
    <li> 
     <p><a href="images/image-3.png" rel="lightbox" data-lightbox="gallery3" data-title="title-image-3"><img src="images/image-3-thumb.png"></a></p> 
    </li> 
    <li> 
     <p><a href="images/image-4.png" rel="lightbox" data-lightbox="gallery4" data-title="title-image-4"><img src="images/image-4-thumb.png"></a></p> 
    </li> 
    <li class="clone"> 
     <p><a href="images/image-1.png" rel="lightbox" data-lightbox="gallery1" data-title="title-image-1"><img src="images/image-1-thumb.png"></a></p> 
    </li> 
</ul> 

Answer 1

我身邊這讓通過手動關閉flexslider的animateLoop和重置動畫：

var speed = 7000; 
$('.flexslider').flexslider({ 
    animationLoop: false,    // turn off animation loop 
    slideshowSpeed: speed, 
    end : function(slider) { 
     setTimeout(function() { 
      slider.flexslider(0);  // reset to first slide 
      slider.flexslider('play'); // restart the animation... 
     }, speed);      // ...after the same duration as slideshowSpeed 
    } 
});