Comment faire un carrousel sur WordPress ?

Apprendre comment faire un carrousel sur WordPress, pour ensuite l’implémenter directement sur votre site, est une super idée pour organiser de l’information de manière simple et digeste. Les carrousels sont massivement utilisés, notamment parce qu’ils sont très pratiques, et surtout qu’ils donnent envie à l’utilisateur d’aller jusqu’au bout de celui-ci, en plus de maintenir son attention. Car il doit interagir avec le carrousel, pour changer de page.

Des carrousels, il en existe de toutes sortes, et pour montrer plein de choses : des logos de nos clients, des avis clients, des chiffres clés, des articles récents, des catégories, des photos, etc.

Nous allons voir dans cet article comment faire un carrousel sur WordPress. Vous verrez qu’il existe plusieurs manières de s’y prendre. Vous pourrez même choisir la vôtre en fonction de vos besoins (simplicité, fluidité, personnalisation, etc.).

Aujourd’hui, vous apprendrez notamment à faire ce carrousel :

Mais en fait, c’est quoi un carrousel ?

Un carrousel est un ensemble rotatif d’images, de textes, ou tout autre type d’élément. En anglais ça porte le nom de « slider », et un slider contient des « slides » (ou diapositives en français). Mais assez de blabla, voici un bon exemple de carrousel mieux comprendre de quoi il s’agit :

Quels sont les avantages d’un carrousel ?

Si vous vous demandez à quoi sert un carrousel, voici un aperçu des avantages que ça apporte à vous, propriétaire, ainsi qu’à vos internautes :

Avoir un site responsive

Un site responsive est un site qui s’adapte à la taille de l’écran, et qui doit donc être à la fois lisible sur un grand écran d’ordinateur, et sur l’écran minuscule d’un ancien smartphone.

Les carrousels montrent l’information petit bout par petit bout, et permettent donc de transformer un grand pavé lisible sur ordinateur en plusieurs petits pavés plus agréables pour mobiles.

Améliorer la compréhension

Comme dit juste au-dessus, un carrousel découpe l’information en plusieurs parties. Rien qu’avec ça, l’information est plus digeste pour le lecteur. Et ça lui permet d’ailleurs de ne lire que l’information dont il a besoin. Et si vous répondez rapidement aux questions des visiteurs, les moteurs de recherche vous en remercieront avec une meilleure visibilité.

Capter l’attention des visiteurs

Un carrousel, de part sa nature dynamique, capte l’attention des visiteurs du site.

Parfois les carrousels se parcourt en automatique, plus ou moins rapidement. Parfois c’est à l’utilisateur de scroller pour le faire avancer. Mais dans tous les cas, son attention est plus élevée que devant un écran entièrement figé.

Se démarquer des autres sites

Comme nous allons le voir, il n’y a pas vraiment de limite avec les carrousels. Vous pouvez en faire de toute sorte, pour tout design, et avec énormément d’effets de style différents.

Si vous êtes motivé, vous pouvez mettre en place un carrousel avec un effet de mouvement impressionnant, qui restera dans la mémoire de beaucoup de visiteurs.

En conclusion

Un carrousel c’est une meilleure expérience utilisateur (UX) et un très bon moyen de préserver vos visiteurs chez vous.

Bien entendu, cela demandera un peu plus de travail qu’un simple pavé de texte. Mais pas d’inquiétude, aujourd’hui il existe des moyens simples d’y parvenir. Même si vous êtes allergiques à la technologie, vous devriez en être capable. Maintenant que vous savez tout ça, voyons maintenant ensemble et sans plus tarder comment faire un carrousel sur WordPress.

Comment faire un carrousel sur WordPress ?

Dans ce guide, nous nous concentrerons sur les sites WordPress avec le thème Divi. Si vous utilisez Shopify, Prestashop, Webflow, ou n’importe quel autre CMS, ce guide n’est peut-être pas pour vous. Et si vous utilisez WordPress sans Divi, ce ne sera pas parfaitement adapté à votre cas, mais dans les informations restent tout de même pertinentes.

Maintenant que c’est dit, voici les 3 grandes manières de créer un carrousel sur WordPress :

• Utiliser un template de carrousel (très simple à mettre en place)
• Utiliser un plug-in de carrousel
• Coder son propre carrousel (le plus difficile à mettre en place)

Noter que chacune de ces solutions est plus ou moins simple à mettre en place. Mais plus c’est simple, moins la personnalisation est grande.

Pour vous aider à bien choisir votre solution, voici un petit aperçu de chacune d’elles :

Utiliser un template

Le principe est simple. Sur WordPress vous pouvez créer un site en 2 clics en utilisant un template pré-existant puis en modifiant simplement les textes, les images, les menus, etc.

Donc, si vous trouvez un template qui contient un carrousel, alors prenez ce template, et vous aurez votre carrousel.

C’est clairement une solution économique. Vous vous contentez d’adapter votre contenu à un carrousel. Mais c’est une solution qui marche malgré tout.

Utiliser un plug-in (ou une extension)

Sur WordPress, il est possible d’ajouter facilement et gratuitement des milliers d’extensions pour faire des milliers de choses. Et beaucoup vous aide à savoir comment faire un carrousel sur WordPress.

Certains sont plus faciles à mettre en place, d’autres plus permissifs, d’autres encore sont plus originaux.

Impossible de vous faire ici la liste des meilleures extensions WordPress dédiées aux carrousels. Mais si le sujet vous intéresse, alors la meilleure chose que vous puissiez faire, c’est de vous rendre vous-même dans :

Tableau de bord WordPress > Extensions > Ajouter une extension. Puis de taper “carrousel” ou “slider” dans la barre de recherche.

Vous aurez alors accès à toutes les extensions existantes. Testez-en quelques-unes, et trouvez celle qui vous convient le mieux.

Ou alors, si vous êtes vraiment perfectionniste, et que vous voulez LA solution idéale dans votre cas…

Coder votre propre carrousel

C’est la solution la plus complexe, mais c’est peut-être aussi la plus gratifiante.

Il est même probable que ce soit la plus légère pour votre site. Et un site léger, c’est un site qui se charge rapidement, ce qui est bon pour votre référencement.

C’est justement cette solution que nous vous proposons d’employer dans ce guide pour apprendre comment faire un carrousel sur WordPress. Mais soyez rassuré d’une chose : ce n’est pas si complexe que ça.

Avec un peu d’effort, n’importe qui peut y parvenir. D’autant qu’avec WordPress, il y a toujours des systèmes mis en place pour vous épargner une partie du travail.

Tout ce que vous aurez à faire, c’est écrire quelques lignes de code. Et même ça, nous vous expliquerons comment faire. Si c’est pas beau la vie.

Comment coder votre propre carrousel sur WordPress ?

Nous entrons désormais dans la partie que je préfère : coder directement son carrousel sur son site. Et vous verrez que c’est amplement faisable, et même parfaitement compréhensible, pour peu que vous ayez la volonté d’en comprendre le fonctionnement.

Vous êtes prêt ? C’est parti !

Stratégie

L’idée globale, puisque nous sommes sur WordPress et Divi, c’est d’utiliser un bloc Code, au même titre qu’un bloc texte ou image sur WordPress. Ce bloc Code vous permettra d’écrire du code à l’intérieur.

Le HTML

Vous n’avez jamais touché à une seule ligne de code ? Pas de soucis. Ce que nous ferons n’est pas si sorcier, vous verrez.

Quelques bases sont tout de même nécessaires : le code que vous écrirez dans le bloc Code, c’est ce qu’on appelle du HTML. Pour HyperText Markup Language. Le HTML c’est LE langage du web. La base de tout. Et voici un aperçu de ce à quoi ça ressemble :

<p> “Ceci est un texte.” </p>

Cette chose que vous voyez : “<p>”, c’est ce qu’on appelle une balise. Ici, c’est la balise p, qui représente un Paragraphe (ou Paragraph en anglais). Ça nous sera très utile pour le carrousel.

Après cette balise, il faut écrire le contenu du paragraphe, c’est-à-dire du texte entre deux guillemets. Ce texte sera alors affiché sur la page.

Et enfin, il ne faut pas oublier la balise fermante : “</p>”. Qui permet de délimiter clairement l’étendue de la balise p. Une balise fermante est toujours comme la balise ouvrante, mais avec un “/” juste après le symbole “<”.

Il existe des tonnes de balises différentes en HTML. Par exemple, peut-être avez-vous déjà entendu parler de “titre h1” ou “titre h2” sans comprendre la signification. Eh bien c’étaient des balises HTML. Et voilà à quoi ça ressemble :

<h1>Titre de ma page</h1>

Nous retrouvons les balises ouvrantes et fermantes, avec un “h1” au lieu du “p” de tout à l’heure. Car cette fois ce n’est pas un paragraphe, mais bien le titre principal de votre page. C’est-à-dire un titre h1. Un titre h2 est un titre plus petit. Pour une sous-section par exemple.

Vous avez peut-être remarqué qu’il n’y a pas de guillemets cette fois. C’est normal, chaque type de balise à son fonctionnement, mais nous ne rentrerons pas trop en détail dans cet article.

Cas particulier : les balises dédiées aux images

Nous tenons tout de même à vous parler un peu des balises dédiées aux images. Très importantes savoir comment faire un carrousels sur wordpress proprement, car vous utiliserez très probablement des images dessus.

Mettons fin au suspens, voici à quoi ressemble une balise d’image en HTML :

<img src=”…”>

Et oui, il n’y a pas de balise fermante ici. Et au lieu d’avoir uniquement “img”, qui est l’identifiant d’une balise d’image, il y a aussi src=”…” dans la balise. C’est ce qu’on appelle un attribut HTML.

Dans le cas présent, ‘src’ indique la source de l’image (une URL pour être précis). Chaque image présente sur le web se trouve derrière une URL. Et l’image retournée par l’url que vous écrivez dans src sera affichée sur votre site grâce à la balise ‘img’.

Mais à l’instar des balises, il existe des tonnes d’attributs HTML différents. Par exemple :

<h1 style=”color: red”>Texte en rouge</h1>

Ce code HTML représente un titre principal de page (ou titre h1) mais avec l’attribut ‘style’ qui modifie la couleur du texte pour le rendre rouge.

Bref, c’est tout pour les explications sur le code HTML. Il existe beaucoup de ressources pour apprendre le HTML, et je vous invite à vous y intéresser si vous êtes curieux.

Le CSS et le JavaScript

En revanche, ce n’est pas tout pour le code. Car nous avons besoin, pour comprendre comment faire notre carrousel sur WordPress, de nous pencher un peu sur les deux autres grands langages du web : le CSS (pour Cascading Style Sheets, ou feuilles de style en cascade en français) et le JavaScript (pas de signification cette fois).

Comprenez qu’il existe donc 3 langages fondamentaux en web : HTML, CSS et JavaScript.

Pour faire un résumé des trois :

• HTML c’est le squelette, les briques de base d’une page.
• CSS c’est le design, le style de ces briques (leur couleur, tailles, ombres, etc.)
• JavaScript, c’est ce qui permet des interactions sur la page. Typiquement, cliquer sur la flèche d’un carrousel pour que celui-ci tourne d’une slide, c’est possible avec du JavaScript.

Et il est possible d’écrire du CSS et du JavaScript à l’intérieur d’un code HTML. Comment ? Avec les balises <style> et <script>.

Voilà à quoi ça ressemble :

Ce qui se trouve à l’intérieur des balises <style> et <script> aura un impact visuel ou fonctionnel sur le reste de la page.

C’était une longue introduction à la programmation web, mais nous n’avons pas vu grand-chose en réalité. Ce sont des sujets si vastes qu’il existe des livres entièrement dédiés à chacun de ces langages.

Nous allons donc nous arrêter là pour les détails sur le code, et nous nous contenterons de vous donner du code déjà fait, en vous détaillant globalement ce qui s’y trouve et comment ça marche. Votre carrousel fonctionnera déjà très bien comme ça.

Après tout, aujourd’hui en 2025, vous pourrez toujours demander à une IA de vous l’expliquer en détail, et même de vous générer un tout nouveau carrousel entièrement fonctionnel.

Place à la pratique : voici comment faire un carrousel sur WordPress

Maintenant que les bases sont en place, passons enfin à l’implémentation du carrousel. Et ainsi vous saurez enfin concrètement comment faire un carrousel sur wordpress !

Commencez par vous rendre à la page dans laquelle vous souhaitez insérer votre carrousel. Puis cliquer sur Activer le Visual Builder (si vous êtes sur Divi) ou sur Modifier l’article dans le cas contraire.

À partir de maintenant nous nous baserons uniquement sur le thème Divi, mais dans l’ensemble, si vous utilisez WordPress, les informations resterons pertinentes et pourront servir. Le seul changement réside dans là où il faut aller pour réaliser les étapes.

Vous êtes dans le visual builder de votre page ? Maintenant créez un module Code, à l’endroit où vous souhaitez voir apparaître un carrousel.

Puis dans la zone de texte de code (celle sur fond noir) coller le code ci-dessous (attention, il est assez long) :

<div class="logo-carousel">
  <div class="carousel-track">
    <div class="carousel-item">
      <img src="<https://guibertweb.fr/wp-content/uploads/2025/10/3s-1.webp>" alt="Logo 3S">
    </div>
    <div class="carousel-item">
      <img src="<https://guibertweb.fr/wp-content/uploads/2025/10/Somewhere-1.webp>" alt="Logo Somewhere">
    </div>
    <div class="carousel-item">
      <img src="<https://guibertweb.fr/wp-content/uploads/2025/10/Vendemiere-1.webp>" alt="Logo Vendemiere">
    </div>
    <div class="carousel-item">
      <img src="<https://guibertweb.fr/wp-content/uploads/2025/10/Aper-1.webp>" alt="Logo APER">
    </div>
    <div class="carousel-item">
      <img src="<https://guibertweb.fr/wp-content/uploads/2025/10/TopyMedia-1.webp>" alt="Logo TopyMedia">
    </div>
    <div class="carousel-item">
      <img src="<https://guibertweb.fr/wp-content/uploads/2025/10/3s-1.webp>" alt="Logo 3S">
    </div>
    <div class="carousel-item">
      <img src="<https://guibertweb.fr/wp-content/uploads/2025/10/Somewhere-1.webp>" alt="Logo Somewhere">
    </div>
    <div class="carousel-item">
      <img src="<https://guibertweb.fr/wp-content/uploads/2025/10/Vendemiere-1.webp>" alt="Logo Vendemiere">
    </div>
    <div class="carousel-item">
      <img src="<https://guibertweb.fr/wp-content/uploads/2025/10/Aper-1.webp>" alt="Logo APER">
    </div>
    <div class="carousel-item">
      <img src="<https://guibertweb.fr/wp-content/uploads/2025/10/TopyMedia-1.webp>" alt="Logo TopyMedia">
    </div>
  </div>
</div>

<style>
.logo-carousel {
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  
  gap: 60px;
  padding: 0px 30px;
  
  @media (max-width: 981px) {
    gap: 30px;
  	padding: 0px 15px;
  }
  @media (max-width: 767px) {
    gap: 14px;
  	padding: 0px 7px;
  }
  
  animation: scroll 20s linear infinite;  /* modifier le "20s" pour changer la vitesse du carrousel. */
  width: max-content;
}

.carousel-item {
  flex: 0 0 auto;
}

.carousel-item img {
  height: 75px; /* hauteur normale des images en pixels */
  
  @media (max-width: 981px) {
  height: 60px; /* hauteur des images si l'écran a un largeur inférieure à 981px, comme pour une tablette. */
  }
  @media (max-width: 767px) {
  height: 50px; /* hauteur des images dans le cas d'un téléphone. */
  }
  
  display: block;
  object-fit: contain;
}

/* Animation fluide */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>

Si tout ce passe bien, vous devriez voir un carrousel comme celui au tout début.

Quelques explications sur le code

Comprenez que si ce carrousel peut tourner à l’infini, c’est parce qu’il redémarre à zéro à chaque fois qu’il termine d’effectuer un tour. Pour que l’illusion soit parfaite, il faut remettre les premières images à la fin, et dans le même ordre. Essayez de changer quelques images par vous-même, puis laissez tourner jusqu’au bout. Vous comprendrez.

Vous remarquerez aussi que l’on retrouve bien du CSS avec la balise <style>. Nous n’avons pas mis de JavaScript pour rester « simple », mais c’est possible d’en ajouter pour repousser toujours plus les possibilités.

Comment modifier le carrousel sur WordPress ?

Voici ce que nous vous proposons de modifier sur votre tout nouveau carrousel :

• Taille des images
• Vitesse du carrousel
• Et évidemment, les images en elles-mêmes

Les endroits où il faut changer toutes ces choses sont écrits directement dans les commentaires. Les commentaires sont les phrases entre /* et */.

À vous de jouer pour réaliser le carrousel de vos rêves. Ou au moins s’en rapprocher.

Conclusion

Et voilà. Vous savez comment faire un carrousel sur WordPress, et vous avez maintenant un carrousel qui tourne correctement sur votre site !

En suivant les étapes de ce guide, vous avez pu réaliser un carrousel étape par étape, et en empruntant la solution la plus adaptée à vos besoins. Et finalement, ce n’était pas si difficile que ça.

De plus, cela vous a certainement permis de rendre votre site un peu plus interactif et intéressant qu’il ne l’était auparavant. En créant ce carrousel, vous améliorez la clarté des informations de votre site.

Mais ce n’est pas tout. Vous avez également progressé dans votre capacité à créer et gérer un site. C’est complètement une capacité de web designer.

Maintenant que le tutoriel est derrière vous, vous pouvez mettre plusieurs carrousels sur une même page, tout en cherchant plus loin dans votre imagination afin de créer des carrousels toujours plus efficaces ou impressionnants.

En bref, à vous de jouer.