Search code examples
flexslider

Flexslider - Prevent first slide from fading in


I want a flexslider to display the first image without fading. I found this code

        $('.mySlider').flexslider({
        slideshowSpeed: 1000,
        animationSpeed: 0,
        start: function (slider) {
            slider.stop();
            slider.vars.slideshowSpeed = 6000;
            slider.vars.animationSpeed = 3500;
            slider.play();
        }
    });

I have to set the slideshowSpeed to something large enough so that the full slideshow does not rattle through before the speed has been changed. I set the animationspeed to 0 first and then to some finite value. This works in all browsers, in principle, except that it does not work on mobile devices. Not Android, not iPad, not even the device simulator in Chrome. If I put a breakpoint in my callback function it gets hit and the slideshow speed is changed as expected, but the animation speed is not. It remains at 0, or whatever other value I set it initially.

So my question is two-fold: the primary goal is to prevent the first slide from fading. If this can be accomplished in another way, without the event callback, then I don't need to solve the mobile browser issue. If not, I would like to know how I can change the animation speed on a mobile browser.

This is the site. I turned off the start callback for now - it is the lesser evil to have the first slide fade in, but it is not ideal.


Solution

  • It turns out that this is the same issue that causes the Flexslider to not fade in IE on Windows 8 (see https://github.com/woothemes/FlexSlider/issues/1043).

    As a workaround I set touch: false as suggested in the post on Github. This made the transition work on devices.

    It works as intended now, with the first slide not fading.