Nathan Colgate

jQuery Cycle Different Effects for Previous and Next

jQuery Cycle plugin is fantastic.  However, there is a little bit of inconsistantcy when using it as a left/right slideshow.  You click the next arrow, it goes right. You click the previous arrow, it goes left right.  The following code allows you to have different effects based on previous/ next button clicks.

Demo

jQuery(document).ready(function(){




		$('#blink_headlines').cycle({ 

	    fx:      	'scrollBothWays',

			next:   	'#cycle_next_blue',

			prev: 		'#cycle_prev_blue',

	    speed:  	1000,

	    timeout: 	0,

			pause:   	1,

			easeIn:   'easeOutBack',

			easeOut:  'easeOutBack'

		});

});





$.fn.cycle.transitions.scrollBothWays = function($cont, $slides, opts) {

	$cont.css('overflow','hidden');

	opts.before.push($.fn.cycle.commonReset);



	// custom transition fn (trying to get it to scroll forward and backward)

	opts.fxFn = function(curr, next, opts, cb, fwd) {

		

		var w = $cont.width();

		opts.cssFirst = { left: 0 };

		opts.animIn	  = { left: 0 };

		

		if(fwd){

			opts.cssBefore= { left: w, top: 0 };

			opts.animOut  = { left: 0-w };

		}else{

			opts.cssBefore= { left: -w, top: 0 };

			opts.animOut  = { left: w };

		};

		

		var $l = $(curr), $n = $(next);

		var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut, animOut = opts.animOut, animIn = opts.animIn;

		$n.css(opts.cssBefore);

		var fn = function() {$n.show();$n.animate(animIn, speedIn, easeIn, cb);};

		$l.animate(animOut, speedOut, easeOut, function() {

			if (opts.cssAfter) $l.css(opts.cssAfter);

			if (!opts.sync) fn();

		});

		if (opts.sync) fn();

	};

};