Problèmes d'affichage d'un slideshow

Bonjour,

nouvelle sur ce forum j'espère que vous pourrez m'aider à résoudre mon problème .
Je conçois actuellement un site internet de recettes de pâtisseries et je souhaiterais réaliser une sorte de carousel (ou slideshow où les images défilent automatiquement) qui afficherait les images des pâtisseries ainsi que leur nom.

J'ai testé différents codes trouvés sur internet mais aucun n'affiche le résultat espéré. Je suppose avoir fait une erreur dans mon arborescence ou dans mon code mais je ne trouve pas, c'est pourquoi je sollicite votre aide !

(une de mes pistes était la taille de mes images qui n'est pas identique à chaque fois mais je ne pense pas que ce soit le fond du problème)

La capture ci-jointe montre les différentes slides en jaune du carroussel.

Voici mon code html :

<div align="center">
  <div class="contener_slideshow">
    <div class="contener_slide">
      <div class="slid_1"><img src="Images/cupcakes.jpg"></div>
      <div class="slid_2"><img src="Images/test.jpg"></div>
      <div class="slid_3"><img src="Images/tiramisu.jpg"></div>
    </div>
  </div>
</div>

Voici mon code css:

.contener_slideshow
{
  width:900px;
  height:200px;
  overflow: hidden;
  position: relative;
  border:3px solid #CD5C5C; /*Affichage test de couleur pour connaitre la taille */
  /* background-image: url(test.jpg); */
}
.slid_1, .slid_2, .slid_3
{
  position: absolute;
  width:900px;
  height:200px;
  border:3px solid yellow; /*Affichage test de couleur pour connaitre la taille */
}
.slid_1{left: 0;}
.slid_2{left: 610px;} /*correspond à la taille que chaque slide */
.slid_3{left: 1220px;}

.contener_slide
{
  width: 1220px;
  height: 211px;
  left:0px;
  position: absolute;
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-name: anim_slide;
  -moz-animation-duration: 20s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-name: anim_slide;
  -ms-animation-duration: 20s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-name: anim_slide;
  animation-duration: 20s;
  animation-iteration-count:infinite;
  animation-name: anim_slide;
}
@-webkit-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@-moz-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@-ms-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}

En espérant que vous pourrez m'aider, bonne soirée
Modifié par DouceursSucrees (23 Sep 2017 - 22:48)

Bonjour,

Le problème vient du ciblage des éléments. En lieu et place de :

.contener_slide

Il faut cibler les éléments directement enfants de cette classe :

.contener_slide > div

Ou encore, pour le même résultat, en ciblant directement les éléments concernés :

[class^="slid_"]

Sinon, pour ce qui concerne la taille des photos, vous pourriez les mettre directement sur les div contenant la classe `slid_` avec la propriété `background-image`, puis occuper toute la place disponible avec `background-size: cover`.
Modifié par Olivier C (24 Sep 2017 - 09:37)

Bonjour Olivier C et merci pour ta réponse !

Malheureusement le changement pour

.contener_slide > div

n'a pas changé grand chose. Les images ne s'affiche pas sur chaque slide...

En espérant avoir d'autres réponses...
Modifié par DouceursSucrees (25 Sep 2017 - 19:01)

Bonsoir.

"…mais aucun n'affiche le résultat espéré."
Désolée mais ce n'est pas très clair.

J'ai repris votre code sans les photos donc du mieux que je pouvais et j'obtiens un résultat (j'ai viré les propriétés avec préfixes).

Le problème a concerné la première photo qui est plus petite que les autres. Comme vous avez mis :

<div align="center">

l'image s'est centrée sur le contenant plus grand et était en partie cachée par la deuxième image.

Bonsoir,

en effet mon erreur est partie de cette balise align...

Je l'ai supprimée et ai sélectionner des images d'une certaines et elles apparaissent comme il faut !

Je prendrais le temps de vérifier que tout va bien et je cloturerais le sujet.

Merci beaucoup