Grow your CSS skills. Land your dream job.

Flexslider in IE – Fade / Time

  • # March 27, 2013 at 7:01 am

    Hello, I’ve just added Flexslider to a site I’m working on. Looks great on modern browsers and the slides changed at the desired rate. However this doesn’t look like it’s working properly on older versions of IE. The fades don’t appear to be working and I think it’s ignoring the 6 second delay and just moving onto the next slide when the image is loaded.

    Here’s the controls I have active

    $(window).load(function() {
    $(‘#hero’).flexslider({
    animation: Modernizr.touch ? “slide” : “fade”,
    slideshowSpeed: 6000,
    pauseOnHover: true,
    pauseOnAction: true,
    touch: true,
    directionNav: false
    });
    });

    Any help would be appreciated.

    # March 27, 2013 at 10:23 am

    Apparently doesn’t work in IE9 either… and the pauseOnHover doesn’t work either…

    # March 27, 2013 at 11:11 am

    > However this doesn’t look like it’s working properly on older versions of IE.

    Which ones? How far back are you supporting?

    # March 27, 2013 at 12:49 pm

    I have it working in IE7. I didn’t do anything special other than use their code with modified CSS. I am however using Modernizr to fill in any blanks the older browsers don’t support.

    $(“.flexslider”)
    .flexslider({
    animation: “fade”,
    animationSpeed: 2000,
    direction: “vertical”,
    directionNav: true,
    prevText: ““,
    nextText: “
    });

    $(‘.flex-next’).click(function(){
    $(‘.flexslider’).flexslider(“play”)
    });

    $(‘.flex-prev’).click(function(){
    $(‘.flexslider’).flexslider(“play”)
    });

    $(‘.flex-control-nav’).click(function(){
    $(‘.flexslider’).flexslider(“play”)
    });

    The last three click functions resume the autoplay after the user hovers out. It’s not a perfect fix, but I thought I should include it.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".