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 scrollLeft
Easing 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 ..
You can change your fx transition to
scrollHorz
it handles automatically the correct direction.Code:
Demo: http://jsfiddle.net/IrvinDominin/TE9Bq/