[Résolu] Slider horizontal simple, étiquette span démarre sur la deuxi

Salut

Soit un petit slider de photos très simple horizontal :

<div id="real" class="photos">
	<img src="image1.jpg" alt="" />
	<span>légende1</span>
	<img src="image2.jpg" alt="" />
	<span>légende2</span>
	<img src="image3.jpg" alt="" />
	<span>légende3</span>
	<img src="photo.jpg" alt="R" />
	<span>unephoto</span>
	<img src="img_3982.jpg" alt="" />
	<span>et voila</span>
</div>

et son css :

	.photos {
		position: relative;
		width: 100%;
		height: 90%;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		}
	.photos img { height: 90vh; width: auto; z-index: 0; }
	.photos span {
		position: absolute;
		width: 67.5vh;
		padding-top: 5px;
		padding-bottom: 5px;
		bottom: 4px;
		z-index: 1;
		background-color: #676767;
		background-color: hsla(0, 0%, 60%, 0.50);
		text-shadow: 1px 1px 1px #000000;
		display: none;
		}
	.photos:hover > span { display: inline-block; }

Le problème : l'étiquette span commence sur la deuxième photo !!!

Pourquoi ?
Que faire ?

Slt slt,

Il faudrait que mette tes "img" en positon absolute aussi

exemple :
https://codepen.io/JUSEN/pen/vYxgKjL

Cela a pour effet de faire complètement disparaitre le slideshow !

du coup tu nous as pas partager tout ton code, parce que avec ce que tu m'a partagé et ce que j'ai fais dans l'exemple tout fonctionne.

Si il y du code que tu n'a pas partagé... je peux pas le deviner

ton site est en ligne? on peut tester ?

Si je vais sur ton codepen et que j'intègre, comme suggéré,

position: absolute;

à

.photos img {}

le slideshow disparait aussi !!

supprimer
Modifié par JENCAL (20 May 2021 - 15:49)

Bonsoir,

J'avoue ne pas etre tres bon en CSS.

mais en faisant quelques tests avec ton code CSS, je ne pense pas que ca commence à l'image 2 comme tu le dis, mais plutot que le span s'affiche à droite de l'image. Donc le span1 va s'afficher sur l'image 2 ...

En faisant le test apres avoir modifier 2 lignes du span :
- left=-100 %
- en supprimant width
ca peut peut etre te donner une idee.

.photos{
    position: relative;
    width: 50%;
    height: 50%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.photos img { height: 50vh; width: 50vw;  }

.photos span{
    position: relative;
    /* width: 67.5vh; */
    left: -100%;
    padding-top: 5px;
    padding-bottom: 5px;
    bottom: 4px;
    z-index: 1; 
    background-color: #676767;
    background-color: hsla(0, 10%, 60%, 0.50);
    text-shadow: 1px 1px 1px #000000;
    /* display: none; */
}

/*  .photos:hover span { display: inline-block; }  */

les span s'affichent bien sur leur image.

Si ca peut t'aider dans tes recherches.

NB : voir aussi : https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition
Modifié par alain_47 (20 May 2021 - 19:46)

J'ai tenté un

.photos span { margin-left: -67.5vh;

mais ça fait dégueu à cause d'un décalage progressif du span, probablement à cause des quelques pixels de marges entre les images* (que je préfère toutefois garder pour l'esthétique).
J'en suis pas loin !

(*d'ailleurs pourquoi elles sont espacées alors que je n'ai rien demandé et qu'un margin:0;padding:0 n'y change rien ?)
Modifié par kerlutinoec (21 May 2021 - 10:21)

Bonjour,

sinon en partant d'une structure un peu plus complexe et sémantique :

<figure>
  <img>
  <figcaption>

le duo relative/absolute fonctionne bien
https://jsfiddle.net/20s5nmo6/
Modifié par gcyrillus (21 May 2021 - 11:13)

Ouaip. Merci. En fait parfois je suis capable de passer 48h à chercher une solution bidouillée plutôt que de refaire une structure propre !