Créer un slideshow pur CSS

J’ai, pendant mon stage, pu apprendre par moi même comment faire un slideshow d’image pour un site web très simplement avec du CSS3, j’ai donc décidé de partager l’astuce !

Je vais vous guider pour créer ce slideshow et l’intégrer comme en-tête d’une page web lamdba, une fois créer il sera de toute façon plaçable n’importe où, il suffira de jouer sur les paramètres.

J’ai créer 4 images de 640 pixels de large sur 320 pixels de hauteur, je vous indiquerais plus tard comment mettre plus ou moins d’images et de différentes tailles (c’est quand même mieux lorsqu’elles sont toutes de la même taille).

Voici le code de ma page HTML, très basique :

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8">
    		<link rel="stylesheet" href="style.css">
    <title>CSS SlideShow</title>
</head>
<body>
<main id="page-content">



<h1>Slideshow CSS</h1>




<header>



<div class="slider">



<div class="slides">
                <img src="img/slide1.png" alt="Slide #1"><!-- --><img src="img/slide2.png" alt="Slide #2"><!-- --><img src="img/slide3.png" alt="Slide #3"><!-- --><img src="img/slide4.png" alt="Slide #4">
</div>



</div>



    </header>


<nav id="menu">
    </nav>


<section>



<h2>I don't 'need' to drink. I can quit anytime I want!</h2>



        
I don't want to be rescued. Guess again. The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. In your time, yes, but nowadays shut up! Besides, these are adult stemcells, harvested from perfectly healthy adults whom I killed for their stemcells.
    </section>


<footer>
    </footer>

</main>
</body>
</html>

Remarquez les commentaires vides présent entres les balises <img>, ils sont très importants, c’est un petit hack qui permet de contrer le problème d’affichage des « whitespaces » due à l’indentation de votre code, avec la propriété « display: inline-block ».

Et commençons maintenant notre feuille de style, rapidement, la mise en forme de la page, vous avez normalement la votre mais je met la mienne pour mieux situer l’exemple. J’ai placer cette mise en page dans une feuille de style appart pour bien différencier le style spécifique au slider et celui spécifique à la page.


/* Reset
---------*/

* {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    padding: 5px;
}

p {
    padding: 5px;
}

/* body
--------*/

body {
    font-family: Arial;
    background-color: #eeeeee;
}

/* Page content
---------------*/

#page-content {
    max-width: 640px;
    display: table;
    margin: 40px auto;
    border-radius: 3px;
    border: solid 1px #999999;
    background-color: #ffffff;
}

Nous allons ensuite mettre en forme le conteneur des image, ici il s’agit de la <div> avec l’id « slideshow ». Il agira comme d’un « cadre » pour vos diapos.


/* Slideshow
-------------*/

/* Slider
----------*/

.slider {
    position: relative;
    width: 640px;
    height: 320px;
    overflow: hidden;
}

Rien de bien compliqué, la propriété « overflow: hidden » est très importante car elle permettra de cacher le contenu dépassant cette balise.

Mettons en forme maintenant le conteneur des images :

/* Slides
----------*/

.slides {
    -webkit-animation: slider 16s infinite ease-in-out;
    animation: slider 16s infinite ease-in-out; /* nombre de slide * temps par slide, ici on choissis de passer 4s par slide donc 4 slides * 4s = 16s*/
    position: absolute;
    left:0; top:0;
    width: 400%; /* nombre de slides * 100%, ici 4 donc 400% */
}

Notez bien une chose ici : la largeur dépend du nombre d’image, par exemple ici j’ai 4 image, la largeur sera donc de 400% (4 fois 100%). Si vous avez 5 images la largeur sera de 500%, etc.

Et enfin les images, il faudra les afficher les unes à côté des autres, pour former une large bande avec vos images que l’on fera défilé de gauche à droite, et ainsi de suite.

/* Images
----------*/

.slides img {
    display: inline-block;
}

Pour cela, c’es très simple, la propriété « display: inline-block » vas tout faire pour vous, génial non ?

Nous allons attaquer la partie « presque » technique : la création de l’animation CSS3. Nous allons faire bouger la position de la div contenant les images en fonction du temps.  Pour cela il faut utiliser les « keyframes ». Je vous invite à consulter la norme W3C pour bien comprendre la syntaxe :

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Il suffit ensuite de décrire, en fonction du temps, l’état de votre <div>.

/* Animation
---------------*/

.slides {
    animation: slider 16s infinite ease-in-out; /* nombre de slide * temps par slide, ici on choissis de passer 4s par slide donc 4 slides * 4s = 16s*/
}

@keyframes slider {
    0%, 20%, 100%   { left: 0%; }  
    25%, 45%        { left: -100%; }  
    50%, 70%        { left: -200%; }
    75%, 95%        { left: -300%; }  
}

N’oubliez pas de préfixer pour assurer la compatibilité avec les vielles version des navigateurs !

Les keyframes servent à décrire une animation CSS au fil du temps, ici on ne fait que jouer sur la position absolue gauche. La règle « animation » sert à décrire quelle keyframe utiliser, il existe ensuite tout un tas de paramètres afin de décrire le timing, la duré, les répétitions de l’animation … L’idéal est de consulter la norme W3C pour tout comprendre !

Vous avez une démo de ce que donne mon code sur ce lien :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *