La création de carrousel avec Divi est une demande récurrente et de longue date dans la communauté des utilisateurs de Divi.
Si vous faites quelques recherches sur le web, vous trouverez des solutions utilisant les plugins jQuery Owl Carousel ou Slick.
Dans ce tutoriel j’utiliserai le plugin jQuery Swiper qui est simple à configurer, bourré d’options et mobile friendly.

Qu’est-ce qu’un carrousel ?

Et oui, il est préférable de commencer par le commencement afin de bien clarifier les choses.

Il y a les carrousels et il y a les sliders. La limite entre les deux est ténue et beaucoup de personnes font l’amalgame.
Pourtant, le carrousel est un slider…

Un slider affiche un élément à la fois (un slide) et le fait défiler.
Un carrousel affiche plusieurs éléments à la fois et les fait défiler.
Mais on peut aussi considérer que le nombre d’éléments visibles en même temps constitue un slide s’ils défilent par groupe de n éléments.

Bref, trève de “e-philosophie” et rentrons sans plus attendre dans le vif du sujet. 😅

Débuter avec Swiper

Comme je vous l’annonçais en introduction, nous allons utiliser le plugin jQuery Swiper qui bénéficie des atouts suivants :

• open source
• mobile friendly (mouvement tactile)
• une API riche
• plusieurs effets de transition
• de nombreux contrôles de navigation
• mise en page avec Flexbox
• effet de parallaxe
• lazy loading pour les images

Je vous invite à consulter la page de démos de Swiper pour voir tous les types de carrousels ou sliders qu’il permet de réaliser.

Incluez les fichiers de Swiper

Afin de pouvoir commencer à utiliser Swiper, il est nécessaire d’inclure un fichier JavaScript et un fichier CSS.
Le plus pratique est d’utiliser les URLs en CDN.

Ajoutez donc les lignes ci-dessus :

• dans les options du thème -> Intégration -> Ajouter ligne de code à la < head > de votre blog si vous souhaitez insérer des carrousels sur plusieurs pages de votre site
• dans un module Code si vous n’insérez un carrousel que sur une seule page

La structure HTML des carrousels de Swiper

Afin de mieux comprendre comment fonctionne Swiper, voici la structure HTML de base qui doit être respectée pour chaque carrousel.
Je vous expliquerai plus loin au cas par cas comment l’adapter avec les éléments du Divi Builder.

Pour la suite, retenez donc bien la hiérarchie de classe :
.swiper-container => .swiper-wrapper => .swiper-slide

Initialisez Swiper

L’initialisation permet de faire appel au plugin jQuery et de lui attribuer les paramètres de notre choix.
Ces lignes de JavaScript sont à insérer dans un module Code sur la page où se trouve le carrousel concerné.

Voici comment procéder à l’initialisation de base avec jQuery :

Nous verrons plus tard que les noms de la variable mySwiper et de la classe .swiper-container peuvent être modifiés.
Et même doivent l’être dans le cas où on insère plusieurs carrousels sur la même page.

Les paramètres de Swiper

Les paramètres de Swiper sont très nombreux (environ 200) et permettent de configurer le carrousel très précisément.
Ils servent par exemple à préciser sa direction, sa vitesse, les transitions, le nombres de slides visibles (même selon les largeurs d’écrans), l’espace entre les slides, s’ils doivent tourner en boucle, etc.

Les erreurs à éviter lors de la saisie des paramètres

• le nom des paramètres est sensible à la casse : slidesPerView n’est pas slidesperview (le premier fonctionnera mais pas le second)
• si vous ouvrez une accolade, pensez bien à la refermer
• chaque ligne de paramètre se termine par une virgule si elle est suivie par une autre ligne de paramètre
• les valeurs true, false et les chiffres s’écrivent sans guillemets. Les autres (par exemple : 'horizontal', 'auto'…) prennent des guillemets

Créez un carrousel avec le module “Galerie” de Divi

Contrairement aux tutos déjà existants qui expliquent comment créer un carrousel dans Divi en ajoutant pléthore de modules “Images”, je vais vous présenter une méthode qui m’apparait être la plus logique.
Si l’on souhaite présenter une série d’images, il me semble évident que le module “Galerie” est le plus adapté.

• Le pour : gestions facilité des images via les options du module “Galerie” (simplicité d’ajout, lightbox…)
• Le contre : on doit paramétrer Swiper un peu différemment, ce qui nous fait perdre quelques options (mais pour un carrousel basique, c’est parfait)

Comprendre la structure HTML requise

Dans ce cas de figure, la hiérarchie de classes nécessaire à Swiper sera la suivante :

• .swiper-container sera à préciser simplement dans les paramètres du module “Galerie”
• .swiper-wrapper sera à injecter avec jQuery à l’élément ayant la classe .et_pb_gallery_items (c’est lui qui contient tous les éléments de la galerie)
• .swiper-slide devra elle aussi être injectée avec jQuery aux éléments ayant la classe .et_pb_gallery_item (c’est-à-dire chaque image de la galerie)

Configurez le module “Galerie”

Je pars du principe que vous avez déjà inclu les fichiers JS et CSS requis pour Swiper, comme expliqué en début d’article.

Commencez par insérer un module “Galerie” là où vous souhaitez le placer sur votre page.

Onglet “Contenu”

Sélectionnez tout d’abord les images que vous voulez voir apparaitre dans votre carrousel.

Définissez le nombre d’images que votre galerie doit afficher.
Précisez une valeur élevée pour être sûr qu’aucune image ne sera oubliée.

Dans “Éléments”, vous pouvez afficher le titre et la légende mais devez impérativement désactiver la pagination.

Onglet “Styles”

Sélectionnez le modèle “Grille”.
Ensuite, vous pouvez personnaliser votre galerie avec le style graphique qui vous convient.

Onglet “Avancé”

Ajoutez la classe CSS swiper-container.

Ajoutez les paramètres de Swiper pour créer un carrousel avec le module “Galerie” de Divi

Insérez où vous le souhaitez sur votre page un module “Code”.

Voici les paramètres correspondant au carrousel que j’ai créé dans ma démo avec un module “Galerie” :

Détaillons ce code

• Ligne 1 : le code Javascript est à englober entre des balises <script>
• Ligne 3 : on utilise jQuery et notre fonction doit s’activer quand la page est chargée
• Lignes 5 et 6 : pour respecter la hiérarchie de classes nécessaire à Swiper, on doit injecter 2 classes à des éléments du module “Galerie”
• Ligne 8 : on définit notre variable qui va contenir les divers paramètres
• Ligne 10 : on active le paramètre cssMode qui permet d’utiliser la propriété CSS scroll-snap.
  C’est un cas un peu particulier qui est requis ici afin d’utiliser un module “Galerie” comme carrousel.
  Comme je vous le disais plus haut, avec ce paramètre activé quelques fonctionnalités de Swiper seront inopérantes (lisez ce qui concerne cssMode sur la page des paramètres de Swiper)
• Lignes 11 à 14 : on active la lecture automatique, avec 2 secondes de pause sur chaque slide et aucun changement s’il y a interaction du curseur (survol, clic…)
• Ligne 15 : l’espace entre chaque image en pixels
• Ligne 16 : on ajoute des précisions concernant le responsive
• Ligne 17 : pour les écrans d’une largeur supérieure ou égale à 981 px…
  (ce qui correspondant à la media query “Bureau” de Divi)
• Ligne 18 : …on affiche 4 images à la fois
• Ligne 20 : pour les écrans d’une largeur supérieure ou égale à 768 px…
  (ce qui correspondant à la media query “Tablette” de Divi)
• Ligne 21 : …on affiche 3 images à la fois
• Ligne 24 : pour les largeurs restantes (les mobiles), on affiche une seule image

Créez un carrousel avec des modules “Image”

Ce carrousel utilise l’effet “cube” de Swiper et est composé de modules “Images”.
Mais vous pouvez utiliser n’importe quel autre type de modules selon ce que vous souhaitez faire (“Texte”, “Résumé”, etc.).

Appliquer la structure HTML requise

Dans cet exemple, la hiérarchie de classes est plus facile à appliquer :

• la classe .swiper-container sera à préciser dans les options de la ligne
• la classe .swiper-wrapper sera à préciser dans les options de la colonne
• la classe .swiper-slide sera à préciser dans les options de chaque module “Image”
  Notez qu’on pourrait aussi l’injecter directement avec jQuery : $('.swiper-wrapper .et_pb_image').addClass('swiper-slide');

Préparez votre structure

Commencez par insérer une ligne d’un seule colonne.

Dans l’onglet “Avancé”, ajoutez la classe CSS swiper-container.

Dans l’onglet “Contenu”, cliquez sur l’icone de roue dentée pour afficher les réglages de la colonne.

Dans l’onglet “Avancé” de la colonne, ajoutez la classe CSS swiper-wrapper.

Vous pouvez maintenant insérer un premier module image.

Dans l’onglet “Contenu”, sélectionnez l’image de votre choix.

Puis dans l’onglet “Avancé”, ajoutez la classe CSS swiper-slide.

Il ne vous reste plus qu’à dupliquer autant de fois que nécessaire votre module “Image.”

Ajoutez les paramètres de Swiper pour créer un carrousel avec des modules “Images” de Divi

Insérez où vous le souhaitez sur votre page un module “Code”.

Voici les paramètres correspondant au carrousel que j’ai créé dans ma démo avec des modules “Image” :

Détaillons ce code

• Ligne 1 : le code Javascript est à englober entre des balises <script>
• Ligne 3 : on utilise jQuery et notre fonction doit s’activer quand la page est chargée
• Lignes 5 : j’ai inclu une pagination dans cet exemple, il faut donc injecter le code HTML nécessaire à la fin du conteneur principal de Swiper (utilisez la classe CSS de votre choix)
• Ligne 7 : on définit notre variable qui va contenir les divers paramètres
• Lignes 9 à 12 : on active la lecture automatique, avec 2 secondes de pause sur chaque slide et aucun changement s’il y a interaction du curseur (survol, clic…)
• Ligne 13 : le carrousel tournera en boucle
• Ligne 16 à 21 : on utilise l’effet “Cube” avec une ombre portée, des ombres sur les slides lors de la rotation ; ensuite on définit la distance et la taille de l’ombre portée
• Lignes 22 à 24 : on ajoute la pagination en précisant la classe CSS qui vous lui avez attribuée

Faites quelques ajustements CSS

Pour définir la taille de votre cube, vous pouvez utiliser la règle CSS suivante :

Vous pouvez constater que par défaut la pagination est alignée à gauche.
Voici la règle CSS pour la centrer. Attention à bien utiliser la classe CSS que vous avez attribuée à votre pagination.

Créez un carrousel avec des colonnes

Dans ce dernier exemple, j’ai utilisé les colonnes d’une ligne comme éléments du carrousel.
La seule limite de cette méthode est la structure des colonnages qui ne pourra dépasser les 6 colonnes proposées par le Divi Builder.

La petite particularité de cet exemple est le fait que le premier slide apparait centré ; on aperçoit l’amorce du précédent et du suivant.

Aperçu de la structure HTML requise

Ici aussi nous allons pouvoir utiliser les éléments du Divi Builder pour appliquer la hiérarchie de classes de Swiper :

• la classe .swiper-container sera à préciser dans les options de la section
• la classe .swiper-wrapper sera à préciser dans les options de la ligne
• la classe .swiper-slide sera à préciser dans les options de chaque colonne
  Notez qu’on pourrait aussi l’injecter directement avec jQuery : $('.swiper-wrapper .et_pb_column').addClass('swiper-slide');

Préparez la structure

Commencez par insérer une section.

Dans les réglages de la section, onglet “Avancé”, ajoutez la classe swiper-container.

Insérez maintenant une ligne dans votre section.
Sélectionnez le nombre de colonnes qui vous convient.

Cette fois, dans les réglages de la ligne, onglet “Avancé”, précisez la classe swiper-wrapper.

Dans l’onglet “Style”, ajustez les options de dimensionnement afin que les colonnes se touchent et que la ligne occupe toute la largeur de l’écran.

Toujours dans les réglages de la ligne, onglet “Contenu”, cliquez sur l’icone de roue dentée de la première colonne pour afficher ses réglages.

Dans l’onglet “Avancé” des réglages de la colonne, précisez la classe swiper-slide.

Comme présenté sur la capture d’écran ci-dessus, utilisez maintenant la fonctionnalité “Étendre les styles” de Divi afin d’attribuer la classe swiper-slide à toutes les autres colonnes que contient la ligne.

Je vous conseille également, dans l’onglet “Style”, d’ajuster la marge intérieure des colonnes avec une valeur en pour cent.
Faite la modification sur une colonne puis utilisez ici aussi la fonctionnalité “Étendre les styles” pour l’attribuer aux autres colonnes.

Il ne vous reste plus qu’à ajouter les modules de votre choix dans chaque colonne.

Ajoutez les paramètres de Swiper pour créer un carrousel avec des colonnes du Divi Builder

Insérez où vous le souhaitez sur votre page un module “Code”.

Voici les paramètres de ma démo correspondant au carrousel que j’ai créé avec des colonnes :

Détaillons ce code

• Ligne 1 : le code Javascript est à englober entre des balises <script>
• Ligne 3 : on utilise jQuery et notre fonction doit s’activer quand la page est chargée
• Lignes 5 : on définit notre variable qui va contenir les divers paramètres
• Lignes 7 à 10 : on active la lecture automatique, avec 2 secondes de pause sur chaque slide et aucun changement s’il y a interaction du curseur (survol, clic…)
• Ligne 11 : on active l’affichage du curseur en forme de main qui saisit
• Ligne 12 : le carrousel tournera en boucle
• Ligne 13 : comme je vous le précisais en début de chapitre, le slide actif est centré à l’écran
• Ligne 14 : aucun espace entre chaque image
• Ligne 15 : on ajoute des précisions concernant le responsive
• Ligne 16 : pour les écrans d’une largeur supérieure ou égale à 981 px…
  (ce qui correspondant à la media query “Bureau” de Divi)
• Ligne 17 : …on affiche 2 images à la fois (comme on est en mode centré, il faut compter 1 slide + 2 moitiés)
• Ligne 20 : pour les autres largeurs d’écrans (donc inférieures ou égales à 980 px), on affiche un seul slide

Comment configurer plusieurs carrousels sur la même page

Vous l’avez constaté sur ma page de démo, j’ai plusieurs carrousels sur la même page.
Si on utilise toujours la même classe, comme je vous l’ai montré dans les exemples ci-dessus, on obtiendra forcément un conflit…
Voici donc comment procéder pour remédier à ça.

Le principe est d’associer une classe complémentaire à celle du conteneur principal de Swiper.
Ce qui nous donne : .swiper-container .carrousel-1
Pour rappel, .swiper-container est la classe du conteneur principal du carrousel, à laquelle j’ajoute ma classe .carrousel-1 (son nom est choisi arbitrairement).

Ensuite, lors de l’initialisation du carrousel, nommez vos variables différemment et utilisez la bonne classe complémentaire.

Pour conclure

Grâce à ce tutoriel, vous avez maintenant les connaissances nécessaires pour créer des carrousel dans Divi.
Je tenais surtout à vous montrer ici des méthodes originales et propres.

Mes exemples assez simplistes ne font qu’effleurer la surface de l’océan de possibilités offertes par Swiper et à vous mettre le pied à l’étrier pour aller plus loin et concevoir des carrousels plus complexes.
Néanmoins, les carrousels étant souvent utilisés pour simplement faire défiler des logos par exemple, suite à la lecture de cet article vous devriez largement être en mesure de le faire par vous-mêmes. 😉

Si tel n’est pas le cas, sachez qu’il existe un module nommé Divi Carousel Module 2.0.
Celui-ci utilise Swiper et permet de créer des carrousels assez poussés avec le Divi Builder.

Partager