Conception slider Ajax

[leom4t]

Bonsoir tout le monde,

je suis confronté à un petit problème de conception.
J'aimerais implémenter un slider d'images en Ajax. Cependant, après voir trouvé pas mal d'exemples sur Google, je n'ai pas trouvé exactement ce que je recherchais.

Je m'explique.

J'aimerais avoir, dans un div, x images. Sur chaque côté devrait se trouver un bouton (précédent, suivant). Lors du clic du bouton suivant, j'aimerais enlever les 5 images vers la gauche avec un effeet de slide, puis effectuer une requête Ajax pour aller chercher les 5 éléments suivants, pour ensuite les afficher avec un effet de slide eux aussi.

A la base, ça ne me paraissait pas compliqué à concevoir, j'avais déjà un peu le code en tête, mais malheureusement, passer à la pratique, c'est autre chose

(J'ai déjà été voir du côté de Jquery slide, ou jquery toggle).

Rien ne vaut un dessin (merci Balsamiq) :
http://img638.imageshack.us/i/newmockup.png/

Pour vous aider (à m'aider^^), voici mon code html :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="content_box">
    <input type="button" id="button_previous" value="Previous"/>
    <div id="content_box_movies"> 
        <div class="content_box_img">
            <img src ="/images/imgMovies/1.jpg" />
        </div>
        <div class="content_box_img">
            <img src ="/images/imgMovies/2.jpg" />
        </div>
        ...
     </div>
    <input type="button"  id="button_next" value="Next"/>
</div>

Avez-vous, soit une idée pour m'aider à réaliser ça moi-même, ou alors est-ce que ce type de slider existe déjà?
En se rappelant bien que le but, c'est justement d'effectuer des requêtes Ajax au fur et à mesure qu'on clique sur le bouton suivant, et pas de charger tout d'un coup pour seulement faire le slider!

Je vous remercie déjà pour votre aide.