Jquery FlexSlider continuous movement (turn off easing to appear like scrolling ticker)

Desmond picture Desmond · Aug 1, 2012 · Viewed 7k times · Source

I have just moved from JQuery Cycle to the FlexSlider plugin and really struggling to get the following parts working:

  1. I have multiple images inside list items that join up to appear as one large. I would like to turn off the easing so it constantly scrolls horizontal at the same pace.

  2. The continuous default animation would move slow, but there are prev/next arrows and I'd like the animation to speed up and go to the next list item when you click it, is this possible?!

  3. I would like the scrolling to pause mid-animation on hover. If you use the "pauseOnHover" option, it waits until it has finished scrolling to the next slide to pause.

Would really appreciate if anyone could help me out with any of the above. Here's my code

$('.flexslider').flexslider({
    animation:'slide',             
    easing:'linear',
    controlNav: false,
    useCCS:false,
    animationSpeed: Modernizr.touch ? 400 : 10000,
    pauseOnHover: true,
    slideshowSpeed:1000,
    animationSpeed:10000,
});

My HTML is basically what you see on the plugin example - I haven't tweaked anything.

Once again, would really appreciate any help!

Answer

Alejandro picture Alejandro · Mar 16, 2013

I figured out how to do the continuos scrolling what I did was to set slideshowSpeed: 1 and animationSpeed: 4000

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    easing: "linear",
    useCSS: false,
    slideshowSpeed: 1,
    animationSpeed: 4000,
    controlNav: false,
    directionNav: false
});

Hope it helps!