jQuery Cycle Effects for Previous and Next

<script> 
$(window).load(function(){
 
 $('#slider').cycle({ 
  fx: 'scrollBothWays',
  next: '#next_slide',
  prev: '#prev_slide',
  speed: 1000,
  timeout: 8000,
  slideshow: true,
  easing : 'easeOutCubic'
 });   
});    
</script> 

<script>

$.fn.cycle.transitions.scrollBothWays = function($cont, $slides, opts) {
 $cont.css('overflow','hidden');
 opts.before.push($.fn.cycle.commonReset);
 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();
 };
};

</script>