Comment créer un carrousel cliquable de modules Divi

Le message d'aujourd'hui a été soumis par Michelle Nunan de Divi Soup, la maison de la "Divi Kitchen" où elle prépare constamment de nouveaux tutoriels et cours en ligne Divi utiles.

Les carrousels sont une fonctionnalité de site Web populaire. Ils vous permettent d'afficher plus de contenu sans prendre de place supplémentaire, et ils ajoutent également un élément d'interactivité à votre site Web qui peut encourager vos visiteurs à s'engager davantage avec votre contenu.

Il existe un certain nombre d'excellents plugins qui peuvent vous aider à afficher votre contenu dans un carrousel, mais dans cet article, je vais vous montrer comment créer un carrousel cliquable de modules Divi en utilisant uniquement CSS et Javascript.

Cet effet peut être utilisé avec presque tous les modules Divi standard, ou combinaison de modules. Je vais vous montrer comment créer ce carrousel en utilisant le module image, puis avec le module blog car le processus est légèrement différent. À partir de là, vous devriez comprendre comment créer votre propre carrousel avec presque tous les modules standard.

Résultat

Voici ce que vous devriez obtenir après avoir créé un carrousel avec le module de blog

Vous pouvez voir une démo en direct ici montrant l'effet à l'aide de divers modules Divi Builder.

Alors, commençons.

Ajouter une nouvelle page

Nous allons commencer par créer un carrousel avec le module image. Ajoutez une nouvelle page ou ouvrez une page à laquelle vous souhaitez ajouter le carrousel.

Ajouter une nouvelle rubrique

Ajoutez une nouvelle section standard à votre page avec une seule colonne. Ouvrez ensuite les paramètres de la section et dans l'onglet Avancé, ajoutez la classe ds-carousel-section dans le champ Classe CSS.

Comme nous allons changer la façon dont la section et les lignes s'affichent, nous souhaitons uniquement que ces modifications soient appliquées à notre carrousel, nous ajoutons donc une classe personnalisée pour empêcher notre code d'affecter d'autres éléments de notre site.

Ensuite, enregistrez et quittez la section.

Ouvrez maintenant les paramètres de ligne et dans l'onglet Avancé, ajoutez la classe ds-carousel-row dans le champ Classe CSS. Ensuite, enregistrez et quittez la ligne.

Ensuite, nous allons ajouter un module d'image à notre ligne. Cliquez sur Insérer un ou plusieurs modules et sélectionnez le module d'image dans la liste.

Dans l'onglet Contenu du module image, cliquez sur Télécharger une image et sélectionnez l'image souhaitée dans la bibliothèque multimédia ou téléchargez-en une nouvelle.

Si vous souhaitez que vos images s'ouvrent dans une lightbox, sélectionnez cette option dans les paramètres.

Vous pouvez également ajouter une URL pour ouvrir une nouvelle page lorsque vous cliquez sur l'image si vous le souhaitez.

La dernière chose que nous devons faire au module est d'ajouter une classe. Cliquez sur l'onglet Avancé et ajoutez la classe ds-carousel-module dans le champ Classe CSS. Ensuite, enregistrez et quittez le module.

C'est l'un de nos modules terminé, mais nous aurons besoin de plus d'une image pour créer le carrousel. Le code que je fournirai plus tard dans cet article affichera 5 images à la fois, nous aurons donc besoin d'au moins 6 images pour que nos boutons de carrousel aient un effet et fassent glisser notre contenu.

À l'aide de la fonction de clonage de Divi, dupliquez le module image autant de fois que vous souhaitez que les images s'affichent dans votre carrousel.

Lorsque vous avez terminé, votre section devrait ressembler à ceci, avec vos modules d'image empilés sur une seule rangée.

Vous devrez ouvrir les paramètres de chaque module et échanger vos images et l'URL si vous l'avez ajouté.

Voilà la configuration du contenu terminée, nous allons maintenant créer la navigation.

Ajouter une nouvelle rubrique

Ajoutez une nouvelle section directement en dessous de votre section d'images, cette fois avec deux colonnes.

Ouvrez les paramètres de ligne et dans l'onglet Avancé, ajoutez la classe ds-arrow-row dans le champ Classe CSS. Ensuite, enregistrez et quittez la ligne.

Ajouter la navigation

Ensuite, ajoutez un module de texte à chacune des deux colonnes de cette ligne.

Nous devons maintenant créer des champs de saisie pour servir de boutons de navigation. Ouvrez le module de texte dans la colonne de gauche et dans la zone de contenu, collez le code HTML suivant :

<input id="ds-arrow-left" type="button" value="8">

Ensuite, enregistrez et quittez le module.

Ouvrez ensuite le module de texte dans la colonne de droite et collez le code HTML suivant :

<input id="ds-arrow-right" type="button" value="9">

Ensuite, enregistrez et quittez le module.

Nous donnons à ces champs de saisie des identifiants uniques de ds-arrow-left et ds-arrow-right afin que nous puissions à la fois les styliser avec CSS et les cibler avec JavaScript pour leur dire ce que nous voulons qu'ils fassent lorsqu'ils sont cliqués.

Les valeurs 8 et 9 font référence aux doubles flèches gauche et droite de la famille de polices ET Modules.

C'est tout ce que nous devons faire dans le constructeur. Si vous vérifiez le début de votre page maintenant, ce ne sera qu'une seule colonne d'images, puis deux petits boutons gris avec 8 et 9 dessus et ils ne feront rien. Passons donc à la partie amusante, en ajoutant notre code.

Ajouter le CSS

Je conseillerais d'ajouter le CSS suivant à votre thème enfant, mais si vous n'utilisez pas de thème enfant, vous pouvez l'ajouter à Divi > Options du thème > Général > CSS personnalisé et assurez-vous de cliquer sur Enregistrer.

/*Hide the section overflow*/
.ds-carousel-section {
    width: 100%;
    overflow: hidden;
}

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}

@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}

/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
    color: #fff;
    background: gray;
    font-family: 'ETModules';
    font-size: 30px;
    padding: 5px 30px;
    border-style: none;
    border-radius: 0;
    cursor: pointer;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/*Position the left arrow*/
#ds-arrow-left {
    float: right;
    margin-right: 5px;
}

/*Position the right arrow*/
#ds-arrow-right {
    float: left;
    margin-left: 5px;
}

/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
    -webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}

/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}

/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
    float: left;
    width: 100% !important;
    margin-right: 0 !important;
}

/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}

@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

Modifiez le CSS selon vos besoins

Vous devrez peut-être modifier certaines des déclarations CSS en fonction du nombre de modules que vous utilisez dans votre carrousel.

Maintenant un peu de maths !

Cette déclaration définit la largeur de la ligne contenant les modules.

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

Afin de faire flotter nos modules les uns à côté des autres, certains étant assis en dehors de la zone visible, nous devons augmenter la largeur de la rangée.

Si vous affichez un total de 15 modules avec 5 par page, vous vous retrouverez avec 3 pages. La largeur visible de la ligne doit donc être :

(15 / 5) x 100 = 300.

Par conséquent, vous devrez modifier les valeurs de 1000vw à un minimum de 300vw. (Cela n'a pas d'importance si vous insérez un plus grand nombre car le JavaScript se chargera de ne pas afficher de pages vides supplémentaires). Ainsi, votre CSS ajusté ressemblerait à ceci :

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 300vw;
    max-width: 300vw;
}

Avec les media queries, c'est légèrement différent. Comme le CSS est configuré pour afficher 3 images par page sur des écrans de 1024 pixels de large et moins, et 1 image par page sur des écrans de 479 pixels de large ou moins, nous devons ajuster les calculs pour refléter cela :

(15 / 3) x 100 = 500 (pour les comprimés)
(15 / 1) x 100 = 1500 (pour les mobiles)

Votre CSS ajusté ressemblerait à ceci :

@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 500vw !important;
    }
}

@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1500vw !important;
    }
}

Vous pouvez si vous le souhaitez simplement modifier toutes ces valeurs à une largeur supérieure au nombre total de modules que vous utilisez pour plus de simplicité. Ainsi, dans l'exemple susmentionné, cette valeur serait de 1500vw ou plus.

Vous pouvez également modifier le nombre de modules affichés par page. Cette déclaration CSS est l'endroit où vous pouvez ajuster cela.

/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

La valeur de largeur de 20vw affiche 5 images par page, et ce n'est qu'un pourcentage de 100. Ainsi, 25vw afficherait 4 images par page et 16.66vw afficherait 6 images par page, et ainsi de suite.

Vous pouvez faire de même pour les requêtes média :

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}

@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

N'oubliez pas que si vous modifiez le nombre d'images affichées par page, vous devrez peut-être également ajuster la valeur de largeur de ligne discutée précédemment.

Si vous vérifiez à nouveau votre page maintenant, tout devrait être joliment stylisé et ressembler à un carrousel, mais pour que cela fonctionne, nous devons ajouter du JavaScript.

Ajouter le JavaScript

Copiez et collez le code suivant dans Divi > Options du thème > Intégrations > Ajouter du code à la < head > de votre blog et assurez-vous d'enregistrer.

<script type="text/javascript">
(function ($) {

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

function mn_next_slide(item) {
		mn_end_index = ( item.length / mn_visible ) - 1; //End index
	
		if (mn_index < mn_end_index ) {
			mn_index++;
			item.animate({'left':'-=100vw'}, 1000);
		}
}

function mn_previous_slide(item) {
		if (mn_index > 0) {
			 mn_index--; 
			 item.animate({'left':'+=100vw'}, 1000);
		}
}

function mn_first_slide(item) {
		if (mn_index > 0) {
			 var move_vw = (100 * mn_index);
			 item.animate({'left':'+='+move_vw+'vw'}, 1000);
			 mn_index = 0; 
		}
}

function mn_set_visible() {
	if ($(window).width() < 480) {      
		mn_visible = 1;
	} else if ($(window).width() < 1025) {
		mn_visible = 3;
	}
}

function mn_carousel_init() {
	mn_set_visible();

	var item = $('.ds-carousel-module');
 
	$('#ds-arrow-right').click(function() {
		mn_next_slide(item);
	});
 
	$('#ds-arrow-left').click(function() {
		mn_previous_slide(item);
	});
	 
	$(window).resize(function() {
		mn_set_visible();
	  	mn_first_slide(item);
	});

}

$(document).ready(function() {
	mn_carousel_init();
});

})(jQuery)
</script>

Ce code ajoute des fonctionnalités à nos boutons, en déplaçant la ligne vers la gauche et la droite au clic pour afficher les modules.

Il y a quelques zones que vous pouvez modifier :

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

Le mn_visible = 5 ; La variable correspond au nombre de modules affichés par page sur le bureau. Donc, si vous avez modifié cela dans le CSS comme mentionné précédemment, vous souhaiterez également modifier cette valeur.

De même, cette fonction ajuste le nombre d'images affichées sur tablettes et mobiles. Donc, si vous avez modifié cela dans le CSS, ajustez également les valeurs mn_visible ici.

function mn_set_visible() {
	if ($(window).width() < 480) {      
		mn_visible = 1;
	} else if ($(window).width() < 1025) {
		mn_visible = 3;
	}
}

Enfin, nous avons la vitesse à laquelle le carrousel se déplace. Il est défini ici sur 1000. C'est la vitesse en millisecondes : 1000 millisecondes = 1 seconde.

Vous pouvez ajuster cette valeur pour accélérer ou ralentir l'animation.

function mn_next_slide(item) {
		mn_end_index = ( item.length / mn_visible ) - 1; //End index
	
		if (mn_index < mn_end_index ) {
			mn_index++;
			item.animate({'left':'-=100vw'}, 1000);
		}
}

function mn_previous_slide(item) {
		if (mn_index > 0) {
			 mn_index--; 
			 item.animate({'left':'+=100vw'}, 1000);
		}
}

function mn_first_slide(item) {
		if (mn_index > 0) {
			 var move_vw = (100 * mn_index);
			 item.animate({'left':'+='+move_vw+'vw'}, 1000);
			 mn_index = 0; 
		}
}

C'est ça! Maintenant, si vous affichez votre page, vous devriez avoir un carrousel cliquable de modules d'images.

Comme je l'ai dit, vous pouvez utiliser cette méthode avec presque tous les modules de construction Divi standard, mais vous devrez peut-être ajuster les paramètres avec des modules conçus pour afficher une sorte de flux, comme le module de blog.

Comme le module de blog extrait les messages et les affiche dans plusieurs colonnes (lors de l'utilisation de la fonction de grille), cela nécessiterait d'ajuster les paramètres du module et un tout petit peu de CSS supplémentaire.

Carrousel utilisant le module Blog

Suivez les mêmes étapes pour configurer votre section et votre rangée.

Au lieu d'ajouter un module image, choisissez le module blog et ajoutez la classe ds-carousel-module dans l'onglet Avancé des paramètres du module.

Ensuite, dans l'onglet Conception, choisissez Grille dans la liste déroulante de la disposition.

Vous pouvez le laisser en pleine largeur si vous le souhaitez, mais l'option Grille ajoute automatiquement un style qui correspond mieux à la disposition du carrousel.

Nous devons maintenant ajuster certains paramètres dans l'onglet Contenu.

Pour ce premier module, nous avons besoin du numéro de poste défini sur 1 et du numéro de décalage défini sur 0.
La manière dont vous ajustez le reste des paramètres et le contenu que vous affichez dépendent entièrement de vous. Ensuite, enregistrez et quittez.

Comme nous l'avons fait auparavant, utilisez la fonctionnalité de clonage de Divi pour dupliquer le module autant de fois que vous en avez besoin.

Une fois que vous avez le nombre de modules de blog dont vous avez besoin, ouvrez chacun d'eux et incrémentez le nombre de décalage de 1 à chaque fois afin que chaque module de blog affiche le prochain article dans le flux.

Vos paramètres ressembleraient donc à ceci :

1er = Numéro de décalage : 0
2e = numéro de décalage : 1
3e = Numéro de décalage : 2
4ème = Numéro de décalage : 3
Etc.

Un petit CSS supplémentaire

Comme le module de blog s'affiche en colonnes lors de l'utilisation du format Grid, nous devons ajouter cette requête multimédia supplémentaire à notre CSS pour remplacer le paramètre de colonne de Divi sur les écrans plus petits :

@media all and (max-width: 980px) {
    /*Set post to fullwidth on smaller screens*/
    .ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
        width: 100% !important;
        margin: 0 !important;
    }
}

Si vous avez décidé d'utiliser le module de blog en mode pleine largeur, vous n'aurez pas besoin de l'ajouter.

Résultat

Maintenant, vérifiez votre page et voyez votre nouveau carrousel de blog

Dernières pensées

Il existe de nombreuses façons d'utiliser cet effet carrousel pour afficher plus de contenu sans augmenter la longueur de votre page.

Vous pouvez afficher une vitrine des conceptions de votre site, des témoignages de clients, des biographies d'employés, des vidéos, des podcasts ou même des produits de votre boutique.

J'aimerais savoir comment vous utilisez ce tutoriel pour créer un carrousel cliquable de modules Divi alors n'hésitez pas à laisser un commentaire dans la section ci-dessous !

Image présentée par aunaauna / Shutterstock.com