Discussion :

[Invité]

Bonjour à tous,

J'ai deux petit problèmes pour réaliser un slideshow (pourtant très basique).
Voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ul id="homeSlidshowContainer">
    <li><img src="../img/P(1).png" /></li>
    <li><img src="../img/P(2).png" /></li>
    <li><img src="../img/P(3).png" /></li>
    <li><img src="../img/P(4).png" /></li>
    <li><img src="../img/P(5).png" /></li>
</ul>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#homeSlidshowContainer {
    overflow: auto;
    height: 400px;
}
 
#homeSlidshowContainer > li {
    position: absolute;
    height: 400px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
   $("#homeSlidshowContainer li:gt(0)").hide();
 
   $("#homeSlidshowContainer").click(function (event) {
       var $presentElem = $("#homeSlidshowContainer li:visible");
       var $nextElem = $("#homeSlidshowContainer li:visible").next("li");
 
       if ($nextElem.length < 1) {
           $nextElem = $("#homeSlidshowContainer li:first");
       }       
       $presentElem.fadeOut("slow");
       $nextElem.fadeIn("slow");
       $(this).delay(4000).trigger("click");
       event.stopPropagation();
   });
});

En fait le problème que j'ai c'est que lors du clic, tous les " li " défilent en non-stop alors que je n'ai pourtant réalisé qu'un seul clic, précédé d'un délai de 4 secondes (avant dernière ligne du code JavaScript).

Le second problème est que je ne parviens pas à faire exécuter un clic en boucle, avec ce même délai. Pour faire plus simple, je voudrais que le slideshow affiche les images en boucle sans que l'utilisateur aie à intervenir par un clic de démarrage. Vous me direz, ici c'est pourtant le cas mais c'était pour tester que le code fonctionne bien.

Si vous pouvez m'éclairer ce serait cool