Comment créer un carrousel automatique avec Divi & Slick.js

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer un carrousel automatique avec Divi, Slick.js et le pack de mise en page Ice Cream Shop. Nous commencerons par inclure la bibliothèque Slick JS dans notre site Web et continuerons en la faisant fonctionner dans le Divi Builder. C'est un excellent moyen de créer un carrousel automatique pour tout type de module que vous souhaitez présenter. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page du carrousel automatique

Pour mettre la main sur la mise en page gratuite du carrousel automatique, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Assurez-vous d'inclure le fichier Slick.js dans vos balises head ! Sans ça, ça ne marchera pas. Voir la première étape ci-dessous.

1. Ajoutez Slick JS à votre intégration de thème Divi

Allez dans les options du thème Divi

La première partie de ce tutoriel est très importante ; ajouter Slick.js à votre site Web. Pour ce faire, rendez-vous dans vos options de thème Divi.

Ajouter Slick.js aux balises Head

Accédez à l'onglet d'intégration et ajoutez le fichier Slick.js aux balises head de votre site Web.

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

2. Créez une nouvelle page à l'aide de la disposition du menu du magasin de crème glacée

Ajouter une nouvelle page

Continuez en ajoutant une nouvelle page à votre site Web. Donnez un titre à votre page, publiez la page et passez à Divi Builder.

Télécharger la mise en page du menu du magasin de crème glacée

Pour ce didacticiel, nous utilisons la mise en page du menu du pack de mise en page Ice Cream Shop, mais n'hésitez pas à utiliser toute autre page/mise en page de votre choix.

2. Ajouter une nouvelle section à la page

Ajouter une nouvelle section

La prochaine étape de la création du carrousel automatique consiste à ajouter une nouvelle section à votre page.

Couleur de l'arrière plan

Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #f5f5f5

Diviseur inférieur

Ajoutez également un séparateur inférieur à la section.

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #ffffff
• Poids du diviseur: 10vw

Espacement

Avec un peu de rembourrage inférieur.

• Rembourrage inférieur : 10vw

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant la première ligne en utilisant la structure de colonnes suivante :

Ajouter un module de texte de titre à la colonne

Ajouter du contenu H2

Ajoutez un module de texte à la colonne de la ligne et insérez du contenu H2 de votre choix.

Paramètres de texte H2

Passez à l'onglet Conception et modifiez les paramètres de texte H2 en conséquence :

• Police de l'en-tête 2 : invite
• Titre 2 Poids de la police : ultra léger
• En-tête 2 Alignement du texte : Centre
• Titre 2 Taille du texte : 60 px (ordinateur de bureau), 40 px (tablette), 25 px (téléphone)
• En-tête 2 Hauteur de ligne : 1,2 em

Dimensionnement

Modifiez également les paramètres de dimensionnement du module.

• Largeur maximale : 800 px
• Alignement du module : Centre

3. Dédiez une nouvelle ligne à une colonne au curseur automatique

Ajouter une nouvelle ligne

Structure des colonnes

Pour créer le carrousel automatique, nous devrons dédier une nouvelle ligne aux éléments que nous voulons placer à l'intérieur du carrousel. Assurez-vous de choisir une ligne avec une seule colonne. Dans les prochaines étapes, nous allons transformer cette colonne en un carrousel automatique.

Dimensionnement

Sans ajouter de modules pour le moment, ouvrez les paramètres de ligne et laissez la ligne occuper toute la largeur de l'écran dans les paramètres de dimensionnement.

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Ajoutez une marge supérieure et supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Marge supérieure : 50px
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Débordements

Nous nous assurons également que rien ne dépasse le conteneur de lignes en masquant les débordements.

• Débordement horizontal : masqué
• Débordement vertical : caché

Paramètres de colonne

Continuez en ouvrant les paramètres de la colonne.

Cours CSS

Ajoutez deux classes CSS différentes à la colonne. Assurez-vous de laisser un espace entre eux. Plus tard dans ce didacticiel, nous utiliserons ces classes pour créer le carrousel automatique.

• Classe CSS : curseur d'articles de crème glacée

Ajouter le premier élément du curseur à la colonne (module d'appel à l'action)

Contenu par défaut

Il est temps de commencer à ajouter le premier élément du carrousel ! Nous utiliserons un module d'appel à l'action, mais n'hésitez pas à utiliser tout autre module de votre choix. Entrez un contenu de votre choix.

Survolez le contenu

Remplacez le titre et le corps du contenu par un caractère vide (tel que celui-ci : ' ') pour supprimer le contenu au survol.

Relier

Assurez-vous également d'ajouter un lien vers le module pour que le bouton apparaisse.

• URL du lien du bouton : #

Fond dégradé par défaut

Ensuite, allez dans les paramètres d'arrière-plan et ajoutez un arrière-plan dégradé.

• Couleur 1 : #8300e9
• Couleur 2: rgba(41,196,169,0)
• Type de dégradé : Radial
• Direction radiale : Haut
• Position de départ : 35 %
• Position finale : 35 %

Supprimer l'arrière-plan du dégradé de survol

Supprimez le fond dégradé au survol.

Image de fond

Téléchargez également une image de fond pertinente.

Paramètres du texte du titre

Passez à l'onglet Conception et modifiez les paramètres du texte du titre en conséquence :

• Police du titre : Invite
• Taille du texte du titre : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)
• Hauteur de la ligne de titre : 2vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)

Paramètres du corps du texte

Modifiez également les paramètres du corps du texte.

• Police du corps : Open Sans
• Taille du corps du texte : 0.9vw (ordinateur de bureau), 2vw (tablette), 2.5vw (téléphone)
• Hauteur de la ligne du corps : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)

Paramètres des boutons

Ensuite, accédez aux paramètres du bouton et stylisez le bouton comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.9vw (ordinateur de bureau), 1.5vw (tablette), 2vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000 (par défaut), #ff6f7e (survol)
• Largeur de la bordure du bouton : 0px

• Rayon de la bordure du bouton : 0px
• Espacement des lettres des boutons : 2px
• Police des boutons : invite
• Poids de la police du bouton : régulier
• Style de police des boutons : majuscule

• Marge supérieure : 19vw (ordinateur de bureau), 30vw (tablette), 45vw (téléphone)
• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)
• Rembourrage droit : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)

Dimensionnement

Nous modifions également la largeur et la hauteur du module.

• Largeur: 23vw
• Hauteur : 23 vw (ordinateur de bureau), 50 vw (tablette), 80 vw (téléphone)

Espacement

Enfin, accédez aux paramètres d'espacement et ajoutez des valeurs de marge et de remplissage personnalisées.

• Marge gauche : 1vw
• Marge droite : 1vw
• Rembourrage supérieur : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)

4. Clonez l'élément de curseur autant de fois que vous le souhaitez

Cloner le module CTA quatre fois

Une fois que vous avez terminé le premier module CTA, vous pouvez le cloner autant de fois que vous le souhaitez. Chaque module de cette colonne fera partie du carrousel automatique.

Modifier le contenu, l'arrière-plan dégradé et l'image d'arrière-plan pour chaque doublon

Assurez-vous de modifier le contenu, l'arrière-plan dégradé et l'image d'arrière-plan de chaque doublon pour rendre chaque module CTA unique.

5. Ajouter une nouvelle ligne sous la précédente

Ajoutez la ligne suivante et la dernière à la section en utilisant la structure de colonne suivante :

Insérer le premier module de code avec le code jQuery

Ajouter un nouveau module de code à la colonne

Ajoutez un premier module de code à la colonne.

Insérer le code CSS

Et insérez les lignes suivantes de code CSS :

<style>
.slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-slide
{
float: left;
}
</style>

Insérer un deuxième module de code avec le code CSS

Ajouter un nouveau module de code à la colonne

Ajoutez un autre module de code juste en dessous du précédent.

Insérer le code jQuery

Et insérez les lignes de code jQuery suivantes :

<script>
jQuery(function($){
$('.icecream-items').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 700,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

Une fois que vous avez ajouté le code CSS et jQuery, vous pouvez quitter le Visual Builder pour voir le résultat !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer un carrousel automatique à l'aide de Divi, de slick.js et du pack de mise en page Ice Cream Shop. C'est un excellent moyen d'ajouter de l'interaction à votre site Web. Vous pouvez faire fonctionner cette technique avec n'importe quel type de module que vous souhaitez afficher ! Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.