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