Variable speed for jQuery Cycle plugin horizontal slider

2
votes

I'm using jQuery Cycle plugin to create a very simple slideshow.

Below the script:

$(document).ready(function() {

var slideshow = $('#slider').cycle({

    fx: 'scrollHorz',
    speed: 500,
    timeout: 8000,
    prev: '#prev',
    next: '#next',
autostop: false 
    });
});

And the part of HTML:

<div id="slider">
<img class="slide" src="header/slider/images/FOTO_SCORRE2.jpg" alt="" />
<img class="slide" src="header/slider/images/FOTO_SCORRE3.jpg" alt="" />
<img class="slide" src="header/slider/images/FOTO_SCORRE4.jpg" alt="" />
<img class="slide" src="header/slider/images/FOTO_SCORRE5.jpg" alt="" />
</div>

My question is: how can I vary the speed of slide, during the image's change? I would like the image accelerates from zero speed to a fixed max speed, and from mid transition decelerates to zero.

It's possible in a simple way?

2
jqueryperformancejquery-cycle
The technical name for what your asking about is 'Easing' See many examples here jqueryui.com/demos/effect/easing.html and here james.padolsey.com/demos/jquery/easing. it appears that the Cycle plugin has easing hooks that you can set. - Robert Beuligmann
exactly what I was looking for, thanks :) - fireb86

2 Answers

2
votes

The technical name for what your asking about is 'Easing' See many examples jQuery UI Easing examples and Other easing Styles. it appears that the Cycle plugin has easing hooks that you can set.

0
votes

Thanks, you're right, easings are supported by Cycle plugin. I modified the code by adding the option:

easing: 'easeInOutExpo',

It was easy!