18008 sujets

Questions générales et questions de débutants

Pb affichage slideshow

Bonjour,
Je relance ma demande d’aide ,
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.

    
<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; }


Merci pour votre aide
Modérateur
Bonjour,

On va supposer que les images font 300x300 pixels.

1) Utiliser inline-block au lieu de inline pour le display de #sContent
#sContent li { display: inline-block;}

2) Imposer une dimension aux images égale à celle #slideshow
img {
	display: block;
	width: 300px;
	height: 300px;
}

3) Donner à #sContent une largeur égale à la largeur totale des images
#sContent {width: 1500px;}

4) Décaler la nième image de 300*(n-1) pixels
#s2:target #sContent { left: -300px; }
#s3:target #sContent { left: -600px; }
#s4:target #sContent { left: -900px; }
#s5:target #sContent { left: -1200px; }


Déjà, là, on devrait voir toutes les images, et avec un décalage approprié.

Amicalement,
Modérateur
Bonjour,

En ce qui concerne les boutons prev et next, je suggère plutôt de les remplacer par des triangles et de les laisser sur l'image avec une couleur semi-transparente :

#slideshow .prev {
	left: 10px;
	width: 0;
	height: 0;
	color: transparent;
	border-right: 20px solid rgba(255,255,255,0.75);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
#slideshow .next {
	right: 10px;
	width: 0;
	height: 0;
	color: transparent;
	border-left: 20px solid rgba(255,255,255,0.75);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

Si on veut vraiment les mettre en dessous du slideshow, il faut agrandir la hauteur du slideshow (par exemple avec un height: 330px;), et positionner les boutons en bas (par exemple avec un top: 310px).

Code css complet avec les boutons en dessous du slideshow :
#slideshow {
	position: relative;    /*le parent positionné*/
	width: 300px;          /*limite en largeur (1 élément du slideshow)*/
	height: 330px;         /*limite en hauteur*/
	margin: 0 auto;
	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: 1500px;         /*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-block;      /*on aligne les éléments du slideshow*/
}

#sContent li img {
	display: block;
	width: 300px;
	height: 300px;
}

#slideshow .next, #slideshow .prev {
	position: absolute;
	top: 140px;
	z-index: 20;
}
#slideshow .prev {
	left: 20px;
	width: 0;
	height: 0;
	top: 310px;
	color: transparent;
	border-right: 20px solid black;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
#slideshow .next {
	right: 20px;
	width: 0;
	height: 0;
	top: 310px;
	color: transparent;
	border-left: 20px solid black;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

/* 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: -300px; } /*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: -600px; } /*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: -900px; } /*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: -1200px; } /*ou -200%*/
#s5:target .next, #s5:target .prev { display: none; }
#s5:target .prev5 { display: block; }

Amicalement,
Sujet clos
Aller à