GIF滑块在flexslider中，如何只在滑块上启动gif [英] GIF slider in flexslider, how to begin the gif only when on slider

问题描述

现在我有一个flexslider与四个幻灯片。第三个滑块是一个gif而不是像其他的jpg。
我遇到的问题是，第三个gif滑块显然是在页面到达时立即开始，而不是当你实际到达那个滑块。当一次点击通过前两个滑块，gif就刚刚完成。

Right now I have a flexslider with four slides. The third slider is a gif rather than a jpg like the others. The issue I am having is that this third gif slider apparently starts immediately when the page is reached as opposed to when you actually get to that slider. By the time one clicks through the first two sliders, the gif is just about finished.

任何人都知道我如何开始一个GIF只有当到达
滑块吗？

Anyone have any idea as to how I would begin a GIF only when one reaches that slider?

推荐答案

我终于找到了解决方案一个小时的测试后，添加之前函数到您的声明代码，将 src 清空并返回原始 src c>执行工作，例如：

I finally found the solution for you after one hour of test, add the before function to your declaration code, and change the src of next img to empty and back to the original src do the work, like bellow :

JS：

将在显示之前初始化gif。

this code will init the gif just before the display.

  $('.flexslider').flexslider({
    animation: "slide",
    before: function(slider){
      var src = $(slider).find('.flex-active-slide').next().find('img').attr('src');
      $(slider).find('.flex-active-slide').next().find('img').attr('src','').attr('src',src);
    }
  });

它完美地为我工作。

请参阅 JS小提示 （您可以注意到gif中的计数器始终以10，没有之前的函数你发现计数器已经开始了），希望有帮助。

See JS Fiddle (you can notice that the counter in gif always start by 10, without before function you find that the counter is already start), hope that help.

这篇关于GIF滑块在flexslider中，如何只在滑块上启动gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！