Créer un slider en pure CSS3 / HTML5 pour WordPress
Par Christopher Hennuyez
HTML5 et CSS3 ne sont pas encore tout à fait valides et restent encore en cours de transition.
Néanmoins, je vous propose aujourd’hui un tutoriel, dont le concept nous vient de Geoffrey Crofte sur CreativeJuiz – Html5 & Css3 : Slideshow, permettant de créer un slider (diaporama) en HTML5 / CSS3 et ce, sans JavaScript. Au risque de me répéter, le slider présenté ici, n’est proposé qu’a titre expérimental afin de vous montrer les possibilités du CSS3 /HTML5. Il n’est pas conseillé de l’utiliser dans un cadre de développement cross-browser.
Démonstration en ligne du diaporama en HTML5 présenté dans ce tutoriel.
Taille : 1 024 o • Hits : 10 722
#1 – Le pattern HTML5
Ce que j’appelle le pattern, c’est tout simplement ce dont nous aurons besoin pour que notre slider fonctionne. C’est un peu la maquette HTML5 de notre slider, sans y intégrer de boucle PHP ou de query_post…
En HTML5, la plupart de vos <div> vont pouvoir être remplacé par la balise <section> – les <div> étant réservées à des blocs indéfinissables du point de vue sémantique. Ensuite, nous mettrons nos slides dans une balise <figure> qui permet de mettre en exergue l’utilisation d’une image et de sa légende (ici, le contenu abrégé) ; toujours d’un point de vue référencement.
Voici la base de notre slider. J’utilise le site Fakeimg pour générer de fausses images, mais libre à vous de mettre vos images pour autant qu’elle respecte le format. Vous remarquerez que pour une question d’optimisation, je n’utilise pas de liste. Tout simplement, parce que ça ne me sert à rien… A ce code, nous ajouterons une timeline.
Grâce à ce bout de code CSS, vous pouvez d’ores et déjà voir le container du slider prendre forme. Évidement, nous n’en resterons pas là. Nous allons gérer les débordement, les bordures, la taille totale du slider (taille = taille des slides x nombre de slides = 400%) :
Vous pouvez voir que notre container à meilleur allure et que nos images sont masquées. Ensuite, nous allons nous occuper de nos légendes <figcaption> qui sont pour l’instant masquées également :
A 0% du déroulement de l’animation, le slider, qui je vous le rappelle est égale à 400% de la taille d’un slide, n’est pas décalé ;
Entre 20 et 25%, mon animation s’exécute ;
A 25%, c’est-à-dire à 1/4 du déroulement de notre animation, je décale “slider” de -100% ;
Entre 45 et 50%, mon animation s’exécute ;
A 50%, je décale de 200% ;
Entre 70 et 75%, mon animation s’exécute ;
A 75%, je décale de 300% ;
Entre 95 et 100%, mon animation s’exécute ;
A 100%, je revient à 0 de décalage ;
Maintenant que nos keyframes sont fixées, nous allons déclarer ce que constitue l’animation slider. Retournez plus haut dans votre code, cherchez #slideshow .slider et ajoutez ceci :
En déclarant ceci, je donne à l’animation slider, un timer de 32 secondes… 32/4 => 8 secondes pour la lecture et l’animation. l’animation se déroule sur 5% du temps total, c’est-à-dire 1,6 secondes… Donc nos slides sont affichées en 6,4 secondes. Un peu de mathématiques, ça fait jamais de tort ! 🙂
Allez-y retester votre slider…. Et oui ça marche, vous en doutiez ?
Nous allons maintenant faire de même avec notre fameuse timeline…
De la même façon que les slides, les keyframes décrivent les étapes de l’animation. Nous savons que la timeline doit être à sont maximum 4* par animation et respectivement à 20, 40, 70 et 90%; et nous définissons à 0%, le début, la fin, et fin des animations de “slide” (0, 100, 25, 50, 75%).
Avec le même procédé, nous allons définir l’animation de la légende pour chaque slide :
Une fois votre slider effectué, voici la méthode pour l’intégrer à votre thème wordpress. Il va falloir configurer une nouvelle boucle qui nous retournera les 4 premiers articles possédant une image. Ce pourrait bien être autre chose, si vous êtes familier avec les “query_post”, vous pourrez trouver moult utilités à ce slider.
Vos images seront décalées si vous copiez ce code.
Si vous m’avez suivi jusqu’ici vous savez désormais coder un diaporama en HTML5 / CSS3 pour WordPress !
Par Christopher Hennuyez
Christopher, 29 ans. Je suis développeur et intégrateur Web ayant pour spécialisation les CMS (Content Management System) dont WordPress.
J'ai commencé à utiliser WordPress, il y a plus de 9 ans, pour un projet personnel. Le système m'a tellement séduit que j'en ai fait mon passe-temps.
WordPress 5.8 active par défaut l’éditeur de widgets par blocs. Si vous souhaitez désactiver cette fonctionnalité, 3 solutions existent de la plus simple à…
Les Custom Taxonomies ou taxonomies personnalisées offrent la possibilité de créer des filtres supplémentaires afin de classer vos contenus aussi bien en back-office qu’en…
@julio : Si c’est bien préfixé comme je l’ai fait. Mozilla dernières versions, Chrome dernières versions, IE à partir de la version 10. Je te fais fis des OS, je n’ai pas testé…
Évidement, ce n’ai pas cross-browser, c’est surtout les propriétés CSS3 d’animations qui doivent être gérées.
Je vais joindre une démo HTML5/CSS3 après… Normalement, l’article n’était pas supposé apparaitre avant fin de semaine. Aurélien travaille plus vite que moi ^^
@tweetpressfr : On peut faire une rétro-compatibilité, mais ça reviendrait à utiliser du js… Donc au final, aucun intérêt. Sinon, effectivement, j’ai 2 ans… J’ai voulu certainement corriger mon age, mais je dû mal le taper… Ça fait plus d’un an que j’écris pour wpchannel quand même.
Par ce tuto, je voulais montrer ce qu’il était possible de faire en CSS3/HTML5. C’est un exemple parmi tant d’autre. Dés que les utilisateurs auront compris comment tout ça fonctionne, on risque de voir émerger pas mal de truc bien sympa…. Et franchement; j’ai hâte de voir ça 🙂
Pareil, j’aurais bien aimé voir un demo pour illustrer ton article 🙂
Tu pourrais aussi pousser le système (sans problème de compatibilité) en utilisant des labels et des input:checkbox pour faire un système de pager qui désactives l’animation en boucle et permet de faire le focus sur une des image.
C’est au menu (si je puis dire). Je ferais un article bonux… Mais pour l’instant j’ai quelques soucis de compatibilité avec les pseudo-classes before et after. J’ai bien intégrer les boutons play/pause. les pastilles de sélections et les flèches gauche/droite me pose quelques problèmes… Bien retord.
Étant en train de tester Twenty Thirtteen, votre article m’a vivement intéressé.
Je ne suis pas un spécialiste mais je suis arrivé à ce résultat : http://www.test.blog-csnd.fr/slider-css3-html5/
Par contre impossible d’afficher correctement les effets 3D de décoration du cadre, donc j’ai simplifié.
Merci de votre aide précieuse.
Cordialement.
Bonjour Christopher,
Moi non plus mais je cherche… Pour l’instant, j’ai supprimé tous les effets d’ombrage. Les boutons Play/Pause fonctionnent mais j’ai de la peine avec les boutons de commande sous le slider. Bon on avance…
Cordialement
pourquoi toujours vouloir se passer de javascript? il ne m’a jamais posé problème et il est indispensable à tout site internet donc autant s’en servir, c’est comme les animations, tout le monde veut les réaliser en css3 alors qu’en javascript on est sur que tout les navigateurs le prendrons bien en compte 😉
Ce tutoriel a bien évidemment un côté expérimental. Mais le recours au CSS3 au lieu de JavaScript est de plus en plus fréquent vu les navigateurs le gèrent de mieux en mieux et que les gens finissent par mettre à jour eux aussi. Autant avoir recours à des technologies gérées nativement plutôt qu’à des bout de JS (mais je n’ai rien contre jQuery et cie). 😉
Mais avec JavaScript, on peut adapter ça selon le nombre d’images du slider, donc en particulier lorsqu’on utilise des CMS, où le client sera amené à faire des changements, c’est dommage de le restreindre “bêtement” à avoir un nombre d’images fixes, non ?
Un système de diaporama moderne dispose bien évidemment d’une gestion en back-office via un champ de type galerie. L’utilisateur glisse / dépose les images et le développeur peut les récupérer en PHP. Le CSS et le JavaScript sont là pour gérer les styles et les animations si besoin.
Avant tout je veux vous remercier pour ce tres bon travail, en occurrence j’ai essayé d’adapter le script pour une résolution de 900 x 420 mais sans sucés , merci de m’aider à trouver une solution !
Merci pour ce code vraiment sympa. J’ai essayé et tout fonctionne à merveille.
Est-il possible d’ajouter le passage manuel d’une slide à l’autre ? Et peut-on ajouter des vignettes pour savoir où on en est dans le diaporama ?
d’abord je te remercie pour ce bout de code interessant , par contre j’aimerais savoir ce que je devrais ajouter ou modifier pour le slider repart a zero , c-a-d apres le slider 4 il passe directement au slider 1 et non pas cet effet de marche-arriere affiche’ actuellement
. Merci d’avance 🙂
Aurélien Denis merci bcp pour l article , je me demande est ce que j’ai le droit d’utiliser ton slider dans un projet qu je peux commercialiser merci de me répondre .
bon courage pour la suite
Bonjour,
très beau slider, merci pour ce travail.
Je me casse le tête pour insérer plusieurs images (11 en tout) mais je n’y arrive pas.
S’il vous plaît, voulez-vous m’aider ?
Merci.
J’essaye d’utiliser ce tutoriel pour réaliser le slider que vous proposez en l’intégrant dans un article de mon site. La largeur étant un peu trop importante (maximum 520 de large), j’ai procédé à des ajustements de largeur qui fonctionne mais un problème persiste : je n’ai qu’une seule image qui apparaît dans le slider (même si je renseigne plusieurs adresse pour 4 images). il s’agit de la première image.
Pourriez-vous m’indiquer la démarche à suivre ? Cela peut-il venir du CSS ou plutôt du HTML ?
je suis super bluffée car j’ai presque réussi en suivant votre tuto; mais pourquoi avoir choisi un query_post au lieu d’une image pour l’exemple? ça m’aurait permis d’aller au bout 😉
Merci pour cet article, super intéressant!! Toutefois, comme une personne ayant commentée avant moi, j’ai également un problème avec les images. Seule la première apparaît correctement. Savez-vous ce qui pourrait expliquer cela?
vraiment terrible le tuto exactement se que je cherchais, tout fonctionne parfaitement en taille 640px, seulement voila je l’ai placer dans la sidebar,la div du slider est de 294×185.
je n’arrive pas a contrôler les @keyframes slider, j’ai beau regarder différents tuto traitant du sujet et rien n’y fait
je ne comprend pas a quoi correspond ces valeurs, disons que j’ai a peu près comprit que il y a un temps pour afficher l image un temps pour la laisser afficher et un autre temps pour afficher la suivante mais quand je change ces valeurs l’effet désiré ne fonctionne pas;
j’ai modifier le % et left mais rien ne s’affiche
pouvez vous m’aider a comprendre comment on calcule tous ca, par ailleur dans le tuto il est question de :
je vous le rappelle est égale à 400% de la taille d’un slide, n’est pas décalé ;
comment a t’il calculer les 400% par rapport au slide de 640px
Ne pas oubliez de commenter les espaces blancs du au retour de ligne et à l’indentation. Les espaces blancs génère du décalage.
Les keyframes ne doivent pas être changer si tu as 4 slides. tu dois juste adapter les taille fixe dans le CSS.
j’ai oublier de préciser que que j’ai mit la valeur a 100% pour que la première image s’intègre parfaitement mais les autres images sont décaler et donc je ne l ai vois pas.
apparemment il n’y à personne sur se forum, pas un seul conseil, aucune aide, merci beaucoup
j’ai compris le principe et trouver la solution, je ne connaissais pas cet technique étant autodidacte, la persévérance paye toujours, les forums ne servent à rien si il n’y a pas d’entraide
je tiens à rappeler que les contributeurs du projet WordPress Channel sont tous des bénévoles et les tutoriels fournis ici doivent servir de base de travail pour apprendre.
Nous répondons dans la mesure du possible et de nos disponibilités.
Si vous attendez un support rapide, passez par le formulaire de contact et nous vous proposons une intervention dans le cadre d’une prestation.
C’est super, seulement sur mon site j’ai besoin de mettre plus que 4 photos, quelle partie du code dois-je modifier pour pouvoir insérer au moins 10 photos dans ce slide?
Bonjour
Je trouve le tutoriel super bien, je ‘en sert tout en gardant la licence, juste je veux ajouter dans chaque image slide un lien hypertexte mais j’arrive pas a le faire ce n’est pas par ce que je ne sais pas non, mais je perd de la qualité du slide s’il vous plait comment arriver a ça? Merci beaucoup/
L’expérience client sur un site e-commerce est l’élément-clé pour fidéliser vos acheteurs. Cela passe notamment par l’envoi de mails qui doivent tisser un lien…
Retrouvez la maîtrise de vos données, respectez le RGPD et améliorez la confiance perçue par vos visiteurs avec Matomo, l’alternative open source à Google…
Depuis WordPress 5.9, un sélecteur de langues peut s’afficher sur la page de connexion à votre interface d’administration. Ce sélecteur liste les langues présentes…
WordPress 5.9 est disponible au téléchargement en français et porte à l’honneur Joséphine Baker. Cette version majeure apporte la deuxième partie du Full Site…
Choisir la meilleure plateforme pour son site e-commerce relève du parcours du combattant. Chaque solution présente des avantages et des inconvénients : comme toujours…
Hello, sympa tout ça, quel est la compatibilité avec les navigateurs ? J’aurais bien aimé voir une démo :p
Salut Julio,
La structure étant très très proche de celle de mon slideshow, je pense que cette démo est plutôt parlante pour ce qui est de la compatibilité :
http://creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/
Bonne journée 🙂
@Julio a priori les versions les plus récentes des navigateurs principaux, après pour la rétro-compatibilité c’est une autre chose.
“Christopher, 2 ans.” > précoce, bravo ! Doit y avoir une coquille dans la bio ^^
Mais, sympa, ça peut en dépanner plus d’un.
@julio : Si c’est bien préfixé comme je l’ai fait. Mozilla dernières versions, Chrome dernières versions, IE à partir de la version 10. Je te fais fis des OS, je n’ai pas testé…
Évidement, ce n’ai pas cross-browser, c’est surtout les propriétés CSS3 d’animations qui doivent être gérées.
Je vais joindre une démo HTML5/CSS3 après… Normalement, l’article n’était pas supposé apparaitre avant fin de semaine. Aurélien travaille plus vite que moi ^^
@tweetpressfr : On peut faire une rétro-compatibilité, mais ça reviendrait à utiliser du js… Donc au final, aucun intérêt. Sinon, effectivement, j’ai 2 ans… J’ai voulu certainement corriger mon age, mais je dû mal le taper… Ça fait plus d’un an que j’écris pour wpchannel quand même.
Par ce tuto, je voulais montrer ce qu’il était possible de faire en CSS3/HTML5. C’est un exemple parmi tant d’autre. Dés que les utilisateurs auront compris comment tout ça fonctionne, on risque de voir émerger pas mal de truc bien sympa…. Et franchement; j’ai hâte de voir ça 🙂
Oui j’étais chaud bouillant hier ! 🙂
Pareil, j’aurais bien aimé voir un demo pour illustrer ton article 🙂
Tu pourrais aussi pousser le système (sans problème de compatibilité) en utilisant des labels et des input:checkbox pour faire un système de pager qui désactives l’animation en boucle et permet de faire le focus sur une des image.
C’est au menu (si je puis dire). Je ferais un article bonux… Mais pour l’instant j’ai quelques soucis de compatibilité avec les pseudo-classes before et after. J’ai bien intégrer les boutons play/pause. les pastilles de sélections et les flèches gauche/droite me pose quelques problèmes… Bien retord.
Bonjour,
Étant en train de tester Twenty Thirtteen, votre article m’a vivement intéressé.
Je ne suis pas un spécialiste mais je suis arrivé à ce résultat : http://www.test.blog-csnd.fr/slider-css3-html5/
Par contre impossible d’afficher correctement les effets 3D de décoration du cadre, donc j’ai simplifié.
Merci de votre aide précieuse.
Cordialement.
Ahh, c’est pas mal. Parcontre, je ne comprend pas avec les styles d’ombrages… Si l’animation fonctionne. A priori, les effet d’ombres également.
Bonjour Christopher,
Moi non plus mais je cherche… Pour l’instant, j’ai supprimé tous les effets d’ombrage. Les boutons Play/Pause fonctionnent mais j’ai de la peine avec les boutons de commande sous le slider. Bon on avance…
Cordialement
pourquoi toujours vouloir se passer de javascript? il ne m’a jamais posé problème et il est indispensable à tout site internet donc autant s’en servir, c’est comme les animations, tout le monde veut les réaliser en css3 alors qu’en javascript on est sur que tout les navigateurs le prendrons bien en compte 😉
Ce tutoriel a bien évidemment un côté expérimental. Mais le recours au CSS3 au lieu de JavaScript est de plus en plus fréquent vu les navigateurs le gèrent de mieux en mieux et que les gens finissent par mettre à jour eux aussi. Autant avoir recours à des technologies gérées nativement plutôt qu’à des bout de JS (mais je n’ai rien contre jQuery et cie). 😉
Mais avec JavaScript, on peut adapter ça selon le nombre d’images du slider, donc en particulier lorsqu’on utilise des CMS, où le client sera amené à faire des changements, c’est dommage de le restreindre “bêtement” à avoir un nombre d’images fixes, non ?
Un système de diaporama moderne dispose bien évidemment d’une gestion en back-office via un champ de type galerie. L’utilisateur glisse / dépose les images et le développeur peut les récupérer en PHP. Le CSS et le JavaScript sont là pour gérer les styles et les animations si besoin.
Avant tout je veux vous remercier pour ce tres bon travail, en occurrence j’ai essayé d’adapter le script pour une résolution de 900 x 420 mais sans sucés , merci de m’aider à trouver une solution !
Merci pour ce code vraiment sympa. J’ai essayé et tout fonctionne à merveille.
Est-il possible d’ajouter le passage manuel d’une slide à l’autre ? Et peut-on ajouter des vignettes pour savoir où on en est dans le diaporama ?
d’abord je te remercie pour ce bout de code interessant , par contre j’aimerais savoir ce que je devrais ajouter ou modifier pour le slider repart a zero , c-a-d apres le slider 4 il passe directement au slider 1 et non pas cet effet de marche-arriere affiche’ actuellement
. Merci d’avance 🙂
Aurélien Denis merci bcp pour l article , je me demande est ce que j’ai le droit d’utiliser ton slider dans un projet qu je peux commercialiser merci de me répondre .
bon courage pour la suite
Je laisse le soin à Christopher de te répondre, c’est lui l’auteur du tutoriel. 😉
Merci 😉
Bonjour,
Vous pouvez disposer de ce tuto comme bon vous semble.
Seul condition, citer tout de même la source dans votre code.
Je ne suis par contre pas responsable des dégâts encourus dans la mise en page du site de votre client si votre intégration se passe mal.
Merci bcp Christopher 🙂
Bonjour,
très beau slider, merci pour ce travail.
Je me casse le tête pour insérer plusieurs images (11 en tout) mais je n’y arrive pas.
S’il vous plaît, voulez-vous m’aider ?
Merci.
Hello,
Merci pour la mention et cette adaptation à WordPress.
Bonne continuation.
Bonjour !
J’essaye d’utiliser ce tutoriel pour réaliser le slider que vous proposez en l’intégrant dans un article de mon site. La largeur étant un peu trop importante (maximum 520 de large), j’ai procédé à des ajustements de largeur qui fonctionne mais un problème persiste : je n’ai qu’une seule image qui apparaît dans le slider (même si je renseigne plusieurs adresse pour 4 images). il s’agit de la première image.
Pourriez-vous m’indiquer la démarche à suivre ? Cela peut-il venir du CSS ou plutôt du HTML ?
Merci beacoup par avance,
Très cordialement,
E.
Bonjour,
je suis super bluffée car j’ai presque réussi en suivant votre tuto; mais pourquoi avoir choisi un query_post au lieu d’une image pour l’exemple? ça m’aurait permis d’aller au bout 😉
merci
Bonjour,
Merci pour cet article, super intéressant!! Toutefois, comme une personne ayant commentée avant moi, j’ai également un problème avec les images. Seule la première apparaît correctement. Savez-vous ce qui pourrait expliquer cela?
Merci!
bonjours a tous,
vraiment terrible le tuto exactement se que je cherchais, tout fonctionne parfaitement en taille 640px, seulement voila je l’ai placer dans la sidebar,la div du slider est de 294×185.
je n’arrive pas a contrôler les @keyframes slider, j’ai beau regarder différents tuto traitant du sujet et rien n’y fait
je ne comprend pas a quoi correspond ces valeurs, disons que j’ai a peu près comprit que il y a un temps pour afficher l image un temps pour la laisser afficher et un autre temps pour afficher la suivante mais quand je change ces valeurs l’effet désiré ne fonctionne pas;
j’ai modifier le % et left mais rien ne s’affiche
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -0% }
50%, 70% { left: -160% }
75%, 95% { left: -300% }
pouvez vous m’aider a comprendre comment on calcule tous ca, par ailleur dans le tuto il est question de :
je vous le rappelle est égale à 400% de la taille d’un slide, n’est pas décalé ;
comment a t’il calculer les 400% par rapport au slide de 640px
4 slides * 100% => 400 %.
Ne pas oubliez de commenter les espaces blancs du au retour de ligne et à l’indentation. Les espaces blancs génère du décalage.
Les keyframes ne doivent pas être changer si tu as 4 slides. tu dois juste adapter les taille fixe dans le CSS.
re salut
j’ai oublier de préciser que que j’ai mit la valeur a 100% pour que la première image s’intègre parfaitement mais les autres images sont décaler et donc je ne l ai vois pas.
bonjour ou bonsoir
apparemment il n’y à personne sur se forum, pas un seul conseil, aucune aide, merci beaucoup
j’ai compris le principe et trouver la solution, je ne connaissais pas cet technique étant autodidacte, la persévérance paye toujours, les forums ne servent à rien si il n’y a pas d’entraide
Bonjour,
je tiens à rappeler que les contributeurs du projet WordPress Channel sont tous des bénévoles et les tutoriels fournis ici doivent servir de base de travail pour apprendre.
Nous répondons dans la mesure du possible et de nos disponibilités.
Si vous attendez un support rapide, passez par le formulaire de contact et nous vous proposons une intervention dans le cadre d’une prestation.
C’est super, seulement sur mon site j’ai besoin de mettre plus que 4 photos, quelle partie du code dois-je modifier pour pouvoir insérer au moins 10 photos dans ce slide?
Bonjour
Je trouve le tutoriel super bien, je ‘en sert tout en gardant la licence, juste je veux ajouter dans chaque image slide un lien hypertexte mais j’arrive pas a le faire ce n’est pas par ce que je ne sais pas non, mais je perd de la qualité du slide s’il vous plait comment arriver a ça? Merci beaucoup/