Bonjour a tous, j'ai un petit problème, j'ai fait un caroussel de base en suivant les cours et les conseilles d'un autre site mais voilà, quand mon caroussel a fini, les deux premières photos remplacent directement les deux dernière (car c'est un caroussel avec des images qui défilent deux par deux ) et il n'est pas préciser comment faire pour qu'il fasse l'animation de comme si il y avait des nouvelles photos alors quand faite, il recommence avec les première... Alors j'ai chercher sur d'autres sites mais ils éxpliquent bien comment le faire mais sur un tout autre dising de caroussel bien plus compliquer... Alors je m,en remet a vous pour m'aider sur comment résoudre mon problème. je vous donne le code html et css de mon caroussel pour si possible modifier quelque petite chose pour atteindre mon objectif je crois que ça a un rapport avec le '@keyframes slidy' mais je n'en suis pas sure...

merci d'avance.

voii mon code html :

<div id="slider">
<figure>
<img src="./img/caroussel/IMG_8866.JPG" class="caroussel">
<img src="./img/caroussel/IMG_7894.JPG" class="caroussel">
<img src="./img/caroussel/IMG_0340.jpg" class="caroussel">
<img src="./img/caroussel/IMG_8952.JPG" class="caroussel">
<img src="./img/caroussel/2010_04194300013.JPG" class="caroussel">
<img src="./img/caroussel/IMG_8763.jpg" class="caroussel">
<img src="./img/caroussel/IMG_0340.jpg" class="caroussel">
<img src="./img/caroussel/IMG_2463.JPG" class="caroussel">
<img src="./img/caroussel/IMG_5023.JPG" class="caroussel">
<img src="./img/caroussel/IMG_2206.jpg" class="caroussel">
</figure>
</div>

et mon code css : 

.caroussel{
    margin: auto;
  }

  @keyframes slidy {
    0%  { left:    0%; }
    20% { left:    0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }
    
    body { margin: 0; } 
    div#slider { overflow: hidden; }
    div#slider figure img { width: 10%; float: left; }
    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 30s slidy infinite; 
    }
    

-
Edité par babax lbg 13 janvier 2019 à 12:48:44