Modèle carousel SPIP accessible et responsive

Écrit le 15 avril 2026 - 30 vues

Un modèle de carrousel SPIP accessible et remis à jour

Il y a trois ans, j’avais développé un modèle de carrousel pour SPIP avec un objectif simple : proposer une solution à la fois élégante, performante et réellement accessible. Avec les évolutions récentes de SPIP, j’ai pris le temps de le remettre à jour pour garantir sa compatibilité avec la dernière version… et en profiter pour affiner certains aspects.

Aujourd’hui, je vous propose un retour sur ce modèle, sa philosophie et son utilisation.

Un modèle pensé pour être simple à intégrer

Dès le départ, j’ai voulu quelque chose de facile à déployer. L’installation reste volontairement minimale : il suffit de déposer un fichier carousel.html dans le dossier squelettes/modeles/. Rien de plus.

Le modèle s’appuie sur les fonctionnalités natives de SPIP, notamment le plugin Images (déjà présent par défaut), ce qui permet de bénéficier du redimensionnement automatique sans configuration supplémentaire.

Une utilisation directe dans les articles

L’un des points clés, c’est l’intégration dans le flux éditorial. Pas besoin de passer par des configurations complexes : tout se fait directement dans le texte de l’article.

Deux approches sont possibles :

• Automatique : récupérer toutes les images liées à un article
  <carousel|id_article=XX>

• Manuelle : sélectionner précisément les images à afficher
  <carousel|images=12,15,18>

Cette flexibilité permet de couvrir la majorité des cas sans alourdir le workflow.

Un système de paramètres complet mais lisible

J’ai voulu éviter les usines à gaz, tout en offrant suffisamment de contrôle. Le modèle accepte plusieurs paramètres combinables, qui permettent d’ajuster finement le comportement du carrousel.

Par exemple :

<carousel|id_article=12|autoplay=oui|delay=4000|ratio=16:9|legendes=non>

<carousel|images=12,15,18>

Voici les principaux réglages :

• autoplay : active le défilement automatique
• delay : contrôle l’intervalle entre les images
• legendes : affiche ou masque les textes associés
• navigation : choix entre flèches, points, les deux ou aucun
• ratio : impose un format d’image (16:9, 4:3, carré ou libre)

L’idée est de rester explicite et lisible, même pour quelqu’un qui découvre le modèle.

Le plus simple (toutes les images de l’article) :
<carousel|id_article=#ID_ARTICLE>

Sélection précise d’images :
<carousel|images=15,16,17,18,19>

Mode diaporama automatique (toutes les 3 secondes) :
<carousel|id_article=#ID_ARTICLE|autoplay=oui|delay=3000>

Format Cinéma (16:9) sans légendes :
<carousel|id_article=#ID_ARTICLE|ratio=16:9|legendes=non>

Format Carré avec navigation complète (flèches + points) :
<carousel|id_article=#ID_ARTICLE|ratio=carre|navigation=les-deux>

Une gestion propre des légendes

Plutôt que d’inventer un système parallèle, je me suis appuyé sur ce que SPIP fait déjà très bien : la gestion des documents.

Les textes sont directement saisis dans l’espace privé :

• Titre : utilisé comme titre principal
• Descriptif : affiché comme description
• Crédits : utilisé pour le copyright

Cela permet aux rédacteurs de rester dans leur environnement habituel, sans apprentissage supplémentaire.

Accessibilité et responsive : des priorités, pas des options

Ce modèle n’est pas qu’un simple slider visuel. J’ai porté une attention particulière à l’accessibilité :

• navigation possible au clavier
• attributs ARIA intégrés
• comportement cohérent pour les lecteurs d’écran

Côté responsive, le carrousel s’adapte naturellement à toutes les tailles d’écran. Sur mobile, le support du geste de swipe permet une navigation fluide et intuitive.

Des performances maîtrisées

Un carrousel peut vite devenir un point de friction en termes de performance. J’ai donc intégré du lazy-loading natif pour éviter de charger inutilement les images hors écran.

Les transitions restent légères : un fondu doux accompagné d’un léger zoom, suffisamment discret pour ne pas gêner la lecture.

Une mise à jour pour la dernière version de SPIP

Cette mise à jour n’est pas qu’une simple adaptation technique. J’en ai profité pour :

• améliorer la compatibilité globale
• fiabiliser certains comportements
• nettoyer le code pour le rendre plus maintenable

Le modèle reste fidèle à son objectif initial : proposer une solution robuste, accessible et facile à utiliser.

Un point à ne pas oublier

Comme souvent avec SPIP, si vous modifiez le modèle ou les contenus et que rien ne semble changer… pensez à vider le cache.

C’est un réflexe simple, mais indispensable.

Conclusion

Ce modèle de carrousel s’inscrit dans une approche pragmatique : tirer parti de SPIP sans le complexifier, tout en respectant les bonnes pratiques modernes (accessibilité, responsive, performance).

Trois ans après sa création, je suis satisfait de voir qu’il reste pertinent, et surtout qu’il continue à répondre efficacement à des besoins concrets.

Si vous cherchez un carrousel simple, propre et intégré à votre logique éditoriale, ce modèle devrait faire le travail sans surprise.

À bientôt, ici ou ailleurs !

Chrys