Table des matières

Voici deux diaporamas sans javascript ni jquery mais uniquement en CSS.

Un diaporama avec fondu

Le html

<div class="css-carousel">
  <img class="css-img" src="path/to/image/1" />
  <img class="css-img" src="path/to/image/2" />
  <img class="css-img" src="path/to/image/3" />
  <img class="css-img" src="path/to/image/4" />
  <img class="css-img" src="path/to/image/5" />
  <img class="css-img" src="path/to/image/6" />
</div>

Le Css (pour 6 images)

.css-carousel {
  width: 100%;
  height: 350px; /* Hauteur des images */
  position: relative;
  overflow: hidden;
}
.css-carousel .css-img {
  max-width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: css-carousel-fade 30s linear infinite;
  -moz-animation: css-carousel-fade 30s linear infinite;
  -ms-animation: css-carousel-fade 30s linear infinite;
  animation: css-carousel-fade 30s linear infinite;
}
.css-carousel .css-img:nth-child(2) {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -ms-animation-delay: 5s;
  animation-delay: 5s;
}
.css-carousel .css-img:nth-child(3) {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -ms-animation-delay: 10s;
  animation-delay: 10s;
}
.css-carousel .css-img:nth-child(4) {
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
}
.css-carousel .css-img:nth-child(5) {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -ms-animation-delay: 20s;
  animation-delay: 20s;
}
.css-carousel .css-img:nth-child(6) {
  -webkit-animation-delay: 25s;
  -moz-animation-delay: 25s;
  -ms-animation-delay: 25s;
  animation-delay: 25s;
}
@-webkit-keyframes css-carousel-fade {
  0%, 20%, 100% { opacity: 0; }
  5%, 15% { opacity: 1;}
}
@-moz-keyframes css-carousel-fade {
  0%, 20%, 100% { opacity: 0; }
  5%, 15% { opacity: 1;}
}
@-ms-keyframes css-carousel-fade {
  0%, 20%, 100% { opacity: 0; }
  5%, 15% { opacity: 1;}
}
@keyframes css-carousel-fade {
  0%, 20%, 100% { opacity: 0; }
  5%, 15% { opacity: 1;}
}

Un cycle complet du carrousel dure 30 secondes, l’animation est divisée en 5 secondes (6 * 5 = 30).

Diaporama avec 3 images

Il faudra adapter le fichier Css :

css-carousel-fade : 15s  
animation-delay: 5s puis 10s  
0%, 40%, 100% { opacity: 0; }
10%, 30% { opacity: 1;}
Paco de Lucía, John McLaughlin et Al Di Meola

Pour 8 images, il faut :

  • changer css-carousel-fade 40s linéaire infini;
  • ajoutez deux .css-carousel .css-img:nth-child(7 et 8) avec animation-delay: 30s et 35s;

Diaporama avec 8 images

Enki Bilal