Mini slideshow jQuery qui boucle non-stop !
Bonjour à tous,
J'ai deux petit problèmes pour réaliser un slideshow (pourtant très basique).
Voici le code :
Code:
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:
1
2
3
4
5
6
7
8
9
| #homeSlidshowContainer {
overflow: auto;
height: 400px;
}
#homeSlidshowContainer > li {
position: absolute;
height: 400px;
} |
Code:
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 :D
