Bonjour je sollicite votre aide car je souhaite créer une maquette simple (qu'elle soit également responsive), qui permet d'afficher une annonce avec ses informations (titre, catégorie, date, prix, photo...).

Pour ce faire j'ai 3 problèmes:

1-En réajustant au niveau du container les div informations et slider sont séparées par une droite verticale. C'était pour créer une bordure pour chaque annonce en ajoutant un width de 240px à container > div. Photo:

2-En augmentant également le width de container > div (400px), les slider apparaissent au dessus des informations lorsqu'on réduit la fenêtre:

3-Pour les annonces qui n'ont qu'une seule image, le slider change en blanc.

Voici le code css:

/*Affichage annonce et slider*/

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.container > div {
  width: 400px;
  height: 160px;
  border: 1px solid orange;
  margin-bottom: 3px;
}

.slider {
  position: relative;
  height: 170px;
  overflow: hidden;
}

.slider img {
  display: block;
  position: absolute;
  width: 240px;
  height: 170px;
}

.slider img:nth-of-type(1) {
  animation: slidein1 8s linear infinite;
}

.slider img:nth-of-type(2) {
  animation: slidein2 8s linear infinite;
}

.informations {
  background: white;
  height: 135px;
}

.informations a {
  text-decoration: none;
  color: #000;
}

@keyframes slidein1 {
  from {
    top: 0%;
  }

  25% {
    top: 0%;
  }

  50% {
    top: 100%;
    opacity: 1;
  }

  74.9% {
    top: 200%;
    opacity: 0;
  }

  75% {
    top: -100%;
    opacity: 0;
  }

  75.1% {
    top: -100%;
    opacity: 1;
  }

  to {
    top: 0%;
  }
}

@keyframes slidein2 {
  from {
    top: 100%;
  }

  24.9% {
    top: 200%;
    opacity: 0;
  }

  25% {
    top: -100%;
    opacity: 0;
  }

  25.1% {
    top: -100%;
    opacity: 1;
  }

  50% {
    top: 0%;
  }

  75% {
    top: 0%;
  }

  to {
    top: 100%;
  }
}

p {
  margin: 0.25em 0;
}
.title {
  color: blue;
  font-size: 12px bold;
  display: block;
}
.price {
  font-size: 10px;
}
.date {
  font-size: 10px;
}
.category {
  font-size: 10px;
}

.city {
  font-size: 10px;
}

/*Fin Affichage Annonce et Slider*/

Le code source html:

<div class="container"> 
<div class="slider" >
<img class ="active" style="width:240px; height:170px;" src="pictures/velo2.jpg"><img class ="active" style="width:240px; height:170px;" src="pictures/velo1.jpg"></div>
<div class= "informations"><a class="maquette" href="single.php?id=4"  >
<p class='title'>vélo à vendre. opportunité!!!</p>
<p class='category'>Vélos</p>
<p class='price'>0</p>
<p class='date'>2022-01-01</p></a>
</div>
</div>

Et finalement, est-ce que pour les annonces qui ont plusieurs image, (plus de 2), faut-il faire du genre:

.slider img:nth-of-type(3) {
  animation: slidein3 8s linear infinite;
}