Slideshow CSS Grid layout

Vous allez constatez qu'il est très facile de mettre en place un slideshow en pur CSS grâce au modèle de rendu Grid layout.

Voici comment procéder en CSS :

1. Le conteneur global

   On crée un élément div qui sera le conteneur global du slideshow dans lequel on va déclarer une longueur maximale avec la propriété max-width (dans notre exemple, il s'agit de 600px).

2. Dispositon en grille

   Nous créons ensuite une liste non ordonnée avec l'élément ul dans laquelle on déclare une disposition en grille.

3. Liste d'images

   Chaque élément li contiendra une image. Puisque nous avons déterminé une disposition en grille sur l'élément conteneur ul, nous allons donc placer les éléments li sur la même rangée et la même ligne avec la propriété grid-area et la valeur 1/1. Ces derniers vont ainsi se superposer. Nous passons ensuite l'opacité à zéro (pour l'effet de fondu plus tard avec l'animation CSS mais également pour permettre à la première image d'apparaître au premier plan). Enfin, nous déclarons notre animation CSS (que nous allons détailler à la dernière étape).

   En ce qui concerne les images, nous déterminons une largeur ainsi qu'une hauteur de 100% et nous ajoutons si besoin est (dans le cas où certaines images possèdent des rapports d'aspect différents) la propriété object-fit et la valeur cover.

4. Mise en place de l'animation CSS

   Nous avons donc déclarer une animation pour le slideshow sur le conteneur des images, à savoir les éléments li. Dans cet exemple, nous avons trois images qui vont apparaître 3 secondes, dont 2 secondes pour l'image et 1 seconde pour le fondu. C'est donc logiquement que nous allons déclarer 9 secondes au total à notre animation.

   De plus, nous devons prévoir un délai entre chaque image de trois secondes. Nous portons notre attention sur le seconde image qui aura un délai de 3 secondes, la troisième image, quant à elle, aura un délai de 6 secondes. La première image n'a pas de delai puisqu'elle dure trois secondes dès le départ de l'animation.

5. Découpage de l'animation CSS

   Nous avons dans notre animation cinq étapes-clé. La première étape se situe au départ à 0% (ou via la valeur from) et la dernière à 100% (ou via la valeur to). Toutes deux possèdent la propriété opacity avec une valeur à zéro.

   Ici, chaque seconde correspond à 11.11% (100% / 9s). Le seconde étape se situe donc à 11.11%, où la première image devient opaque. Elle va le rester jusqu'à la troisième étape-clé à 33.33% (deux secondes) et commence à disparaître jusqu'à la quatrième étape-clé à 44.44% tandis que le seconde image commence à apparaître et ainsi de suite.

<div class="cadre-slideshow-grid">

<ul class="slideshow-css-grid">

<li><img src="image.jpg" alt></li>
<li><img src="image.jpg" alt></li>
<li><img src="image.jpg" alt></li>
</ul>

</div>

*{box-sizing:border-box}



.cadre-slideshow-grid{
	
max-width: 600px;
margin: 2rem auto;
	
	}	
	

.slideshow-css-grid{
	 
  display: grid;/*on déclare le Grid layout*/
	 
}

.slideshow-css-grid li {

border: 10px solid white;
box-shadow:0 0 10px rgba(0, 0, 0, 0.2);

/*on empile tous les éléments sur la même colonne et la même rangée et rien de plus*/
grid-column: 1;
grid-row: 1;
/*ou grid-area:1/1*/

opacity: 0;
animation: slide 9s linear infinite
}
	
	
.slideshow-css-grid li:nth-child(2)	{
	
	animation-delay: 3s
	
	}
	
.slideshow-css-grid li:nth-child(3)	{
	
	animation-delay: 6s
	
	}

.slideshow-css-grid li img{max-width:100%}


@keyframes slide{

0%, 100% {
    opacity: 0;
  }
  11.11% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  44.44% {
    opacity: 0;
  }

}