Slideshow using jquery

I have a slideshow created by jQuery which slides from left to right by default. There is a next button which on click should slide the images from left to right and while clicking the previous button the images should slide from right to left.

Currently I have a code like :

jQuery('.slider').cycle({ 
      fx:     'scrollRight', 
      speed:  1000, 
      timeout:5000, 
      next:   '.next',
      prev:  '.prev'
    });

Now it slides from right to left by default and on clicking the next button as required, but it has to move from left to right on previous button clicking which is not happening..

I will be really thankfull if any body can help in this matter..

EDIT: here is the html code:

<div class="slider ddblock-processed" style="position: relative; width: 990px; height: 396px; visibility: visible; overflow-x: hidden; overflow-y: hidden; ">
         <div class="slide" style="position: absolute; top: 0px; opacity: 1; width: 990px; height: 396px; z-index: 4; left: 990px; display: none; "><img src="http://files/images/ddblock/mobile-apps.png" alt="image" style="height: 392px; width: 990px; " class="ddblock-processed"></div>
         <div class="slide" style="position: absolute; top: 0px; opacity: 1; width: 990px; height: 396px; z-index: 4; left: 990px; display: none; "><img src="http://files/images/ddblock/seo.png" alt="image" style="height: 392px; width: 990px; " class="ddblock-processed"></div>
         <div class="slide" style="position: absolute; z-index: 5; top: 0px; opacity: 1; display: block; width: 990px; height: 396px; left: 0px; "><img src="http://files/images/ddblock/web-applications.png" alt="image" style="height: 392px; width: 990px; " class="ddblock-processed"></div>
         &开发者_如何转开发lt;div class="slide" style="position: absolute; top: 0px; opacity: 1; width: 990px; height: 396px; z-index: 4; left: 990px; display: none; "><img src="http://files/images/ddblock/webdesign.png" alt="image" style="height: 392px; width: 990px; " class="ddblock-processed"></div>
       </div>
 <!-- prev/next pager on slide -->
       <div class="pager-slide prev-container prev-container-top">
   <a class="prev" href="#"></a>
  </div>
  <div class="pager-slide next-container next-container-top">
   <a class="next" href="#"></a>
  </div>

Try using HTML5Slides, a free solution provided by Google.