Créer un slider en pure CSS3 / HTML5 pour WordPress

HTML5 et CSS3 suffisent pour créer un slider (diaporama) qui défile tout seul, sans une ligne de JavaScript.

Je vous propose un tutoriel dont le concept vient de Geoffrey Crofte, sur Creative Juiz (CSS3 – Créer un slideshow automatique et contrôlable), permettant de créer un slider (diaporama) en HTML5 / CSS3 et ce, sans JavaScript. Les animations CSS qu’il utilise fonctionnent dans tous les navigateurs actuels, sans préfixe -webkit- ou -moz- : Chrome, Edge, Firefox et Safari reconnaissent animation et @keyframes depuis 2015 au plus tard (voir la compatibilité de @keyframes sur MDN) : le code ci-dessous s’en passe donc.

Démonstration en ligne / sources

#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…

En HTML5, la balise <section> regroupe des contenus sur un même thème, tandis que les <div> restent réservées aux blocs sans signification particulière, utiles à la mise en forme (voir le standard HTML). Ensuite, nous mettrons nos slides dans une balise <figure>, qui associe une image à sa légende <figcaption> (ici, le titre du slide).

<section id="slideshow">
	<div class="container">
		<div class="c_slider"></div>
		<div class="slider">
			<a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 1</figcaption>
			</figure></a>
			<a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 2</figcaption>
			</figure></a>
			<a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 3</figcaption>
			</figure></a>
			<a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 4</figcaption>
			</figure></a>
		</div>
	</div>
</section>

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’elles respectent le format, chacune avec un texte alternatif qui la décrit à la place de alt="", sauf si sa légende dit déjà tout. 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.

<section id="slideshow">
	<div class="container">
		<div class="c_slider"></div>
		<div class="slider">
			<a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 1</figcaption>
			</figure></a><!--
			--><a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 2</figcaption>
			</figure></a><!--
			--><a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 3</figcaption>
			</figure></a><!--
			--><a href="#"><figure>
				<img src="http://fakeimg.pl/640x310/" alt="" width="640" height="310" />
				<figcaption>Fake image de 640x310px. Slide 4</figcaption>
			</figure></a>
		</div>
	</div>
	<span id="timeline"></span>
</section>

Astuce : afin d’éviter tout espace non désirable entre les images, je vous conseille de commenter vos indentations.

#2 – Le CSS3

Premièrement, concentrons-nous sur la mise en forme de ce slider :

#slideshow {
	position: relative;
	max-width: 640px;
	padding: 15px;
	border: 1px solid #ddd;
	margin: 0 auto 2em;
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 2px;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
/*-- Ombrage CSS3 --*/
#slideshow:before,
#slideshow:after {
	position: absolute;
	bottom: 16px;
	z-index: -10;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
	left: 0;
	transform: rotate(-4deg);
}
#slideshow:after {
	right: 0;
	transform: rotate(4deg);
}

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%) :

#slideshow .container {
	position: relative;
	aspect-ratio: 640 / 310;
	overflow: hidden;
	overflow: clip;
}
#slideshow .container:after {
	position: absolute;
	bottom: 0; left: 0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}
#slideshow .slider {
	position: absolute;
	left: 0; top: 0;
	width: 400%;
	height: 100%;
}
#slideshow figure {
	position: relative;
	display: inline-block;
	width: 25%;
	height: 100%;
	padding: 0; margin: 0;
}
#slideshow figure:after {
	position: absolute;
	display: block;
	content: " ";
	top: 0; left: 0;
	width: 100%; height: 100%;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}
#slideshow img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

Les largeurs fixes de 640 pixels de la première version débordaient de l’écran des smartphones : le slider s’adapte désormais à la largeur disponible, jusqu’à 640 pixels, et aspect-ratio conserve les proportions de 640 × 310 des images. object-fit: cover recadre une image d’un autre format au lieu de la déformer. Enfin, overflow: hidden sert de solution de secours aux navigateurs qui ne connaissent pas overflow: clip, dont je vous explique l’intérêt plus bas.

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 :

#slideshow figcaption {  
    position:absolute;  
    left:0; right:0; bottom: 5px;  
    padding: 20px;  
    margin:0;  
    border-top: 1px solid rgb(225,225,225);  
    text-align:center;  
    letter-spacing: 0.05em;  
    word-spacing: 0.05em;  
    font-family: Georgia, Times, serif;  
    background: #fff;  
    background: rgba(255,255,255,0.7);  
    color: #555;  
    text-shadow: -1px -1px 0 rgba(255,255,255,0.3);  
}

Vous devriez avoir quelque chose dans ce goût là :

#3 – L’animation

Pour la phase animation, il est nécessaire de se poser quelques question :

• Combien de temps nécessaire à la lecture du slide ?
• Combien de temps va durer la transition ?
• Combien ai-je de slides ?

Ces questions sont nécessaires car elles vont nous permettre de calculer notre temps total, notre temps d’animation, et notre temps de lecture.

En ayant ces valeurs, nous allons fixer les keyframes pour animer nos slides :

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

En créant ces keyframes, je boucle comme suit :

• 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 :

#slideshow .slider {  
    /* ... avec la propriété animation */  
    animation: slider 32s infinite;  
}

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…

Notre animation :

#timeline {
	position: absolute;
	bottom: 15px;
	left: 15px;
	width: 0;
	height: 1px;
	background: rgba(214,98,13,.8);
	animation: timeliner 32s infinite;
}

Nos keyframes :

@keyframes timeliner {
    0%, 25%, 50%, 75%, 100% { width: 0; }
    20%, 45%, 70%, 95%      { width: calc(100% - 30px); }
}

De la même façon que les slides, les keyframes décrivent les étapes de l’animation. La timeline atteint sa largeur maximale 4 fois par cycle, à la fin de l’affichage de chaque slide (20, 45, 70 et 95 %), et revient à 0 au début, à la fin et à chaque changement de slide (0, 25, 50, 75 et 100 %). Sa largeur maximale, calc(100% - 30px), est celle des images, quelle que soit la taille de l’écran.

Avec le même procédé, nous allons définir l’animation de la légende pour chaque slide.

Nos keyframes :

@keyframes figcaptionner {
    0%, 20%, 45%, 70%, 95%                 { bottom: -100%; }
    10%, 19%, 35%, 44%, 60%, 69%, 85%, 94% { bottom: 5px; }
}

Chaque légende remonte au début de l’affichage de son slide, reste visible, puis redescend sous l’image juste avant la transition suivante.

L’animation :

#slideshow figcaption {  
    /* ... la propriété animation */  
    animation: figcaptionner 32s infinite;  
}

Reste l’accessibilité. Un slider qui défile tout seul gêne les personnes sensibles aux animations, qui peuvent demander à leur système de les réduire : la requête média prefers-reduced-motion permet de respecter ce réglage. Le tutoriel du W3C sur les carrousels recommande aussi de mettre l’animation en pause au survol de la souris et quand le clavier atteint le slider :

/* Pause while the mouse is over the slider */
#slideshow:hover * {
	animation-play-state: paused;
}

/* Keyboard navigation or reduced motion: no animation, the slides scroll by hand */
#slideshow:focus-within .slider,
#slideshow:focus-within figcaption,
#slideshow:focus-within #timeline {
	animation: none;
}
#slideshow:focus-within .container {
	overflow-x: auto;
}
@media (prefers-reduced-motion: reduce) {
	#slideshow .slider,
	#slideshow figcaption,
	#timeline {
		animation: none;
	}
	#slideshow .container {
		overflow-x: auto;
	}
}

Au survol, l’animation se fige. Au clavier, comme pour les visiteurs qui demandent moins d’animations, elle s’arrête et les slides défilent à la main : le lien sélectionné reste ainsi visible. C’est la raison d’être d’overflow: clip : avec overflow: hidden seul, le cadre resterait décalé une fois le clavier parti, et le slider afficherait les mauvais slides. Le critère 2.2.2 des WCAG demande en outre de pouvoir mettre en pause, arrêter ou masquer tout contenu qui bouge automatiquement pendant plus de 5 secondes : le W3C conseille pour cela un bouton qui arrête et relance l’animation, à prévoir si votre site doit être pleinement accessible.

#4 – L’intégration dans WordPress

Une fois votre slider effectué, voici comment l’intégrer à WordPress. Évitez de coller le CSS dans le fichier style.css de votre thème : la prochaine mise à jour du thème effacerait vos modifications. Le plus simple consiste à créer une petite extension (voyez comment créer un plugin de fonctions) : dans un dossier wp-content/plugins/wpc-slider/, enregistrez tout le CSS de ce tutoriel dans un fichier slider.css, puis ajoutez ce fichier wpc-slider.php :

<?php
/**
 * Plugin Name: WPC Slider
 * Description: CSS-only slider of the 4 latest posts with a featured image, displayed with the [wpc_slider] shortcode.
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Registers the slider stylesheet (slider.css, next to this file).
 */
function wpc_slider_register_style() {
	wp_register_style( 'wpc-slider', plugins_url( 'slider.css', __FILE__ ), array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'wpc_slider_register_style' );

/**
 * Renders the [wpc_slider] shortcode: the 4 latest posts with a featured image.
 *
 * @return string Slider HTML, or an empty string when no post has a featured image.
 */
function wpc_slider_shortcode() {
	$query = new WP_Query(
		array(
			'posts_per_page'      => 4,
			'ignore_sticky_posts' => true,
			'no_found_rows'       => true,
			'meta_query'          => array(
				array(
					'key'     => '_thumbnail_id',
					'compare' => 'EXISTS',
				),
			),
		)
	);

	if ( ! $query->have_posts() ) {
		return '';
	}

	// Load the stylesheet only on pages that display the slider.
	wp_enqueue_style( 'wpc-slider' );

	$slides = '';
	while ( $query->have_posts() ) {
		$query->the_post();
		// "eager": the hidden slides must be loaded before they slide in.
		$slides .= sprintf(
			'<a href="%1$s"><figure>%2$s<figcaption>%3$s</figcaption></figure></a>',
			esc_url( get_permalink() ),
			get_the_post_thumbnail( null, 'large', array( 'loading' => 'eager' ) ),
			wp_kses_post( get_the_title() )
		);
	}
	wp_reset_postdata();

	// No white space between the links: the slides stay side by side.
	return '<section id="slideshow"><div class="container"><div class="c_slider"></div><div class="slider">'
		. $slides
		. '</div></div><span id="timeline"></span></section>';
}
add_shortcode( 'wpc_slider', 'wpc_slider_shortcode' );

La fonction wpc_slider_shortcode() remplace la boucle query_posts() de la première version de ce tutoriel, une fonction que sa documentation officielle déconseille. Elle crée le code court [wpc_slider], qui affiche les 4 derniers articles dotés d’une image mise en avant, et ne charge la feuille de style, avec wp_enqueue_style(), que sur les pages qui affichent le slider. Les liens sont collés les uns aux autres pour éviter le décalage des images, et celles-ci sont chargées tout de suite (eager) : en chargement différé, les slides cachés ne se chargeraient qu’au moment d’apparaître.

Activez l’extension depuis Extensions > Extensions installées, puis insérez [wpc_slider] dans un bloc Code court, dans une page ou un article. Avec un thème à blocs, pour placer le slider dans un modèle de l’éditeur de site (Apparence > Éditeur), utilisez plutôt un bloc HTML personnalisé : dans un modèle, le bloc Code court ajoute des paragraphes dans le HTML du slider, qui ne fonctionne plus. Le CSS est calculé pour 4 slides : si vous changez leur nombre, recalculez les keyframes.

Pour des images fixes plutôt que vos derniers articles, collez le HTML du pattern (la version avec les commentaires) dans un bloc HTML personnalisé, et chargez la feuille de style sur tout le site en ajoutant wp_enqueue_style( 'wpc-slider' ); à la fin de la fonction wpc_slider_register_style().

Une alternative sans animation : le carrousel scroll-snap

Si le défilement automatique n’est pas indispensable, les propriétés CSS scroll-snap donnent un carrousel que l’internaute fait défiler lui-même, au doigt, au pavé tactile ou avec la barre de défilement : chaque image se cale d’elle-même dans le cadre, et la question de la pause ne se pose plus. Le HTML se limite à une suite de figures :

<div class="wpc-carousel">
	<figure>
		<img src="slide-1.jpg" alt="Description de l'image 1" width="640" height="310" />
		<figcaption>Slide 1</figcaption>
	</figure>
	<figure>
		<img src="slide-2.jpg" alt="Description de l'image 2" width="640" height="310" />
		<figcaption>Slide 2</figcaption>
	</figure>
	<figure>
		<img src="slide-3.jpg" alt="Description de l'image 3" width="640" height="310" />
		<figcaption>Slide 3</figcaption>
	</figure>
</div>

.wpc-carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.wpc-carousel figure {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}
.wpc-carousel img {
	display: block;
	width: 100%;
	height: auto;
}

Ces propriétés fonctionnent dans tous les navigateurs actuels (voir la compatibilité de scroll-snap-type sur MDN). Ce carrousel se place lui aussi dans un bloc HTML personnalisé, avec son CSS chargé de la même façon.

Si vous m’avez suivi jusqu’ici vous savez désormais coder un diaporama en HTML5 / CSS3 pour WordPress !

Si vous préférez une version animée en JavaScript, découvrez comment créer un slider personnalisé avec jQuery.