Problème affichage slide

Bonsoir,

J'ai suivi un tuto pour créer un slide de 5 image https://www.alsacreations.com/tuto/lire/1058-ID-slideshow-css3-target-animation.html
Le souci est que je n'ai qu'une seule image qui s'affiche
Pouvez-vous m'aider svp. J'aimerais aussi changer les boutons Prev/next en flèches à l'extérieur des images comme dans l'exemple.

Merci pour votre aide

<div id="slideshow">
<div id="s1">
<div id="s2">
<div id="s3">
<div id="s4">
<div id="s5">
<a class="next next1" href="#s2">Next</a> <!-- Pour la 1ère étape -->
<a class="prev prev2" href="#s1">Prev</a> - <a class="next next2" href="#s3">Next</a> <!-- Pour la 2ème étape -->
<a class="prev prev3" href="#s2">Prev</a> - <a class="next next3" href="#s4">Next</a> <!-- Pour la 3ème étape -->
<a class="prev prev4" href="#s3">Prev</a> - <a class="next next4" href="#s5">Next</a> <!-- Pour la 4ème étape -->
<a class="prev prev5" href="#s4">Prev</a> <!-- Pour la 5ème étape -->
<ul id="sContent">
<li><img src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" alt="Salle d'attente" /></li><!--
--><li><img src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" alt="Entrée" /></li><!-- 
--><li><img src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" alt="Thérapie" /></li><!--
--><li><img src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" alt="Cabinet" /></li><!--
--><li><img src="https://meshrepsy.fr/wp-content/uploads/Cure-type.jpg" alt="Cure type" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

#slideshow {
	position: relative;    /*le parent positionné*/
	width: 300px;          /*limite en largeur (1 élément du slideshow)*/
	height: 300px;         /*limite en hauteur*/
	margin: 0px;
	overflow: hidden;      /*on cache ce qui déborde*/
}
#sContent {
	position: absolute;   /*on sort l'élément du flux*/
	top: 0;               /*on le positionne précisément dans ...*/
	left: 0;              /*l'angle haut gauche de son parent positionné*/
	width: 450px;         /*ou 100% car 5 éléments*/
	margin: 0;            
	padding: 0;
	z-index: 10;
	
	/*CSS3 transition*/
        -webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#sContent li {
	display: inline;      /*on aligne les éléments du slideshow*/
}

#slideshow .next, #slideshow .prev {
	position: absolute;
	top: 140px;
	z-index: 20;
}
#slideshow .prev { left: 0; }
#slideshow .next { right: 0; }

/* initialisation */
#slideshow .next, #slideshow .prev { display: none; }
#slideshow .next1 { display: block; }

/* Vers 1ère étape */
#s1:target #sContent { left: 0px; }
#s1:target .next, #s1:target .prev { display: none; }
#s1:target .next1 { display: block; }

/* Vers 2ème étape */
#s2:target #sContent { left: -150px; } /*ou -100%*/
#s2:target .next, #s2:target .prev { display: none; }
#s2:target .next2, #s2:target .prev2 { display: block; }

/* Vers 3ème étape */
#s3:target #sContent { left: -150px; } /*ou -100%*/
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .next3, #s3:target .prev3 { display: block; }

/* Vers 4ème étape */
#s4:target #sContent { left: -150px; } /*ou -100%*/
#s4:target .next, #s4:target .prev { display: none; }
#s4:target .next4, #s4:target .prev4 { display: block; }

/* Vers 5ème étape */
#s5:target #sContent { left: -300px; } /*ou -200%*/
#s5:target .next, #s5:target .prev { display: none; }
#s5:target .prev5 { display: block; }

Modifié par Emi89 (02 Feb 2019 - 03:53)