Slideshow using jquery
<p>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.</p>

<p>Currently I have a code like :  </p>

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

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

<p>I will be really thankfull if any body can help in this matter..</p>

<p><strong>EDIT:</strong> 
here is the html code:</p>

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