Diaporama en utilisant jquery

Question

J'ai un diaporama créé par jQuery qui glisse de gauche à droite par défaut. Il y a un bouton suivant qui, au clic, devrait faire glisser les images de gauche à droite et en cliquant sur le bouton précédent, les images devraient glisser de droite à gauche.

Actuellement, j'ai un code comme:

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

Maintenant, il glisse de droite à gauche par défaut et cliquez sur le bouton suivant, au besoin, mais il doit se déplacer de gauche à droite sur le bouton précédent cliquant ce qui ne se produit pas ..

Je serai vraiment thankfull si un organisme peut aider dans cette affaire ..

EDIT: ici est le code html:

<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> 
     <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> 

Answer 1

Essayez d'utiliser HTML5Slides, une solution gratuite fournie par Google.