Gif Slider In Flexslider, How To Begin The Gif Only When On Slider

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

Solution 1:

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 :

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

Its work perfectly for me.

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.

Solution 2:

As far as I know, it's not really possible to pause/stop/play GIF animations using code.

The workarounds I know of are...

1. Some browsers won't start the GIF animation until the element is actually visible on the screen, so you could hide the image until the slide is active and then $('#MyGifImage').show(). You'll need to test how this behaves in various browsers, however.

2. As suggested in this question you could create image sprites instead of an animated GIF.

Have you tried either of those methods?