Question

我正在使用flexslider并在每个幻灯片灯箱2图片库中。

问题是当我设置flexslider“animationLoop：true”时，灯箱首先翻倍，最后一张幻灯片库图像。

当我设置“animationLoop：false”时，问题就消失了。

我注意到问题来自flexslider“clone”幻灯片。 Flexslider“克隆”最后一张和第一张幻灯片 - 创建“循环”效果。同时灯箱拿起“真正的”幻灯片+“克隆”幻灯片来生成所有必需的画廊 - 并将第一张和最后一张幻灯片图片制作成双倍。

有没有人有解决这个问题的简单解决方案 - 因为我想在flexslider中使用这个Loop effext？！

以下是flexslider的示例代码，在幻灯片中使用“animationLoop：true”和“clone”幻灯片+ lightbox 2。

 $('#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
    }
});

Flexslider + Lightbox 2图库加倍问题

1 个答案: