Break one jQuery Easing plugin animation into two (left + right)?

Question

I have this code in which jQuery Easing plugin is being used to switch between Testimonials.

This code can be seen here (go to Testimonials section): http://jsfiddle.net/ahmadka/3hkwz/

When you open the Testimonials section, you'll see 2 buttons at the bottom for switch left (called prev) and right (called next) between the Testimonials.

The code works, but it uses the same scrollLeftEasing animation for going both left and right. I want to update the code so that when prev is clicked, the animation used should be scrollRight, not scrollLeft ..

The same JavaScript is used to link both prev and next's clicks to the same Easing animation code:

$('.scrollable4 .items').cycle({
    fx: 'scrollRight',
    speed:700,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    easing: 'easeInOutBack',
})

How do I split them up ?

Also, there is an attached JavaScript resource file which contains some relevant code:

Deminify this: http://www.jenierteas.com/templates/default/js/jquery.cycle.all.2.74.pack.js

Then go to line 118, and you'll see this snippet:

case "prev":
case "next":
    var u = i(q).data("cycle.opts");
    if (!u) {
        f('options not found, "prev/next" ignored');
        return false
    }
    i.fn.cycle[t](u);
    return false;

So can someone help me here ? I'm baffled ..

Answer 1

You can change your fx transition to scrollHorz it handles automatically the correct direction.

Code:

$('.scrollable4 .items').cycle({
    fx: 'scrollHorz',
    speed:700,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    easing: 'easeInOutBack'
})

Demo: http://jsfiddle.net/IrvinDominin/TE9Bq/