Bonjour à tous et à toutes

Je suis en train de faire un petit slideshow, très simple, très léger, mais si je suis là c'est qu'il y a un petit problème....

Ce petit diaporama a un défaut, lors du 1er tour, la dernière image s'intercale entre toutes les autres et quand ce 1er tour est fini, il fonctionne parfaitement.

Je vous mets les codes , pour HTML
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="slideshow">
   <div>
     <img src="images/textile/01.jpg" width="240">
   </div>
   <div>
     <img src="images/textile/02.jpg" width="240">
   </div>
   <div>
     <img src="images/textile/03.jpg">
   </div>
 
 
</div>

Pour le javascript
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
div:gt(0)").hide();
 
setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 3000);
et pour le CSS
Code css : 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
 #slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 313px; 
    height: 470px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}
 
#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

Je suppose que c'est dans le javascript que j'ai fait un erreur, mais j'avoue qu'au niveau de connaissance que j'ai je me retrouve un peu coincé....

Si vous pouviez me mettre sur la piste, ça serait sympa

Merci à vous