Les curseurs de carrousel sont largement adoptés dans la conception Web pour leur capacité à présenter efficacement des services, des images, des fonctionnalités et divers autres contenus sans occuper trop d'espace. En implémentant un carrousel, vous pouvez optimiser l'utilisation de l'espace et améliorer l'expérience utilisateur globale.
Dans ce guide, je vais vous guider tout au long du processus d’intégration de la fonctionnalité carrousel dans votre site Web Divi . Nous exploiterons la bibliothèque Swiper.js d'une source tierce et appliquerons un CSS personnalisé pour adapter le curseur à vos préférences.
Pour intégrer la fonctionnalité de slider dans votre site Web Divi, invoquez simplement la bibliothèque swiper.js dans le fichier function.php de votre thème enfant.
Concevoir un curseur de carrousel sans plugin
Pour activer la fonctionnalité de notre slider, nous devons inclure la bibliothèque swiper.js dans le fichier function.php de notre thème enfant Divi.
Créer des sites Web incroyables
Avec le meilleur constructeur de page Elementor
Commencer MaintenantDe plus, nous devons insérer un code de configuration spécifiant des paramètres tels que le nombre de colonnes à afficher dans le curseur, si les diapositives doivent être en boucle et si la navigation par flèche et la pagination doivent être activées, entre autres paramètres.
Pour une liste complète des configurations disponibles, veuillez vous référer à la page API Swiper . Passons maintenant à la mise en œuvre.
Tout le code PHP doit être incorporé dans le fichier function.php du thème enfant Divi. Vous pouvez apporter des modifications à ce fichier via FTP, le gestionnaire de fichiers sur votre serveur ou en utilisant l'éditeur de thème accessible dans le tableau de bord WordPress. Dans ce cas, nous allons procéder avec l'éditeur de thème.
Pour mettre en file d'attente la bibliothèque swiper.js dans notre thème enfant, procédez comme suit:
- Accédez à Apparence → Éditeur de thème
- Ouvrez le fichier function.php dans votre thème enfant et ajoutez du code PHP personnalisé.
<?php
// Enqueue Swiper.js Library
function dp_carousel(){
wp_enqueue_script( 'your-swiper-js-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.js', [] , '7.0.2', true );
wp_enqueue_style( 'your-swiper-css-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.css', [] , '7.0.2');
}
add_action('init', 'dp_carousel', 99);
function dp_carousel_slider_scripts() {
?>
<script type="text/javascript">
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.dp-carousel')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '<div class="swiper-pagination"></div>';
// If we need navigation buttons
extraControls += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
slider.innerHTML = '<div class="swiper-container" style="overflow:hidden">' + slider.innerHTML + '</div>' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
slidesPerView: 1, // mobile value
loop: true,
spaceBetween: 0, // mobile value
autoplay: {
delay: 3000,
},
speed: 600,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
768: { // Tablet
slidesPerView: 2,
spaceBetween: 20,
},
981: { // Desktop
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
</script>
<?php }
add_action( 'wp_footer', 'dp_carousel_slider_scripts'); - Sélectionnez Mettre à jour le fichier.
Nous devons maintenant utiliser le Divi Builder pour créer toutes les choses qui seront affichées dans notre slider. Les classes et identifiants personnalisés de ligne, de colonne et de module devront être ajoutés. Il ne peut y avoir qu'une seule disposition de colonnes, et elle sera convertie en carrousel en fonction des numéros de colonnes spécifiés dans le code PHP des paramètres.
J'ai utilisé des modules Blurb avec un beau design et des effets de survol pour cet exemple, mais vous pouvez utiliser le module Divi de votre choix.
Ajoutez une section avec une ligne de colonne à votre page à l’aide de Divi Builder.
Recherchez le module Blurb et ajoutez-le à la page.
Les paramètres de ligne sont accessibles en cliquant sur le symbole d'engrenage dans la barre d'outils verte.
Sélectionnez ID CSS et classes avancés.
Incluez dp-carousel dans le champ Classe CSS.
Passer à l'onglet Contenu
Ouvrez les paramètres de colonne et ajoutez la classe swiper-wrapper au champ Classe CSS.
Pour personnaliser le module de présentation, ouvrez les paramètres du module et accédez à l'onglet Avancé. Ajoutez ensuite swiper-slide au champ CSS.
Accédez à l'onglet Contenu et cliquez sur le bouton Texte.
Incluez le titre et le corps du texte.
Ajoutez une image d'arrière-plan dans la bascule d'arrière-plan.
Maintenant, pour la conception du texte du titre, voici les paramètres:
- Police du titre – Abhaya Libre
- Couleur – #415962
- Taille du texte du titre – 26px et 22px sur mobiles
Pour le corps du texte, suivez ces paramètres.
- Police du titre – Open Sans
- Couleur – #879296
- Taille du corps du texte – 14 px et 12 px sur mobiles
- Hauteur de la ligne du corps: 1,5em
Dans cette dernière étape, nous ajouterons un espacement Blurb et un CSS personnalisé pour donner au conteneur de contenu un fond blanc et une animation de zoom sur l'image d'arrière-plan.
Activez le bouton Espacement de conception dans les paramètres Blurb.
- Un rembourrage pour les ordinateurs de bureau devrait être ajouté. 300px/1,5v/1,5v/1,5v
- Un rembourrage pour les comprimés doit être ajouté. 220px/30px/30px/30px
- Un rembourrage pour les mobiles devrait être ajouté. 200px/20px/20px/20px
Accédez à l'onglet Avancé et cochez la case CSS personnalisé.
Taille de l'arrière-plan: 100%.
Transition d’arrière-plan vers le champ Élément principal.
Toutes les transitions sont de 0,5 s.
En survol, ajoutez une taille d'arrière-plan et une transition vers l'élément principal.
Taille d'arrière-plan 105 %; Toutes les transitions sont de 0,5 s.
Pour la couleur d'arrière-plan, collez-la dans le champ CSS personnalisé.
background-color: white;
padding: 30px 1.5vw;En outre, vous devez ajouter une couleur d'arrière-plan et un remplissage au champ de contenu Blurb lors du survol.
background-color: white;
padding: 30px 4vw;
Maintenant que nous avons terminé le module Blurb, nous pouvons le reproduire autant de fois que nous le souhaitons pour ajouter de nouveaux textes de présentation à notre carrousel. Il vous suffit de remplacer les mots et de modifier l'image d'arrière-plan dans chaque module copié.
Notre slider est presque terminé. Enfin, nous ajouterons du CSS personnalisé pour décorer la navigation et la pagination de nos curseurs. Ce code peut être placé dans le fichier Divi/Theme Options/Custom CSS ou le fichier style.css de votre thème enfant.
/* DP Slider Navigation */
.dp-carousel .swiper-button-prev {
transform: none;
margin-top: -100px;
top: 10px !important;
margin-left: auto!important;
right: 52px;
font-size: 20px !important;
background-color: #fff;
padding: 25px !important;
}
.dp-carousel .swiper-button-next {
transform: none;
top: 10px !important;
margin-top:-100px;
right: 0px !important;
background-color: #fff;
padding: 25px !important;
}
/* Arrow Size and Style */
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 20px;
color: #aed4e4;
}
/* DP Slider Pagination */
.dp-carousel .swiper-pagination-bullet-active {
background-color: #fff;
}
.dp-carousel .swiper-pagination-bullet {
background-color: #fff;
top: 15px;
}
Voici maintenant la diapositive finale.
Derniers mots
Créer un carrousel dans Divi sans utiliser de plugin implique de tirer parti des fonctionnalités intégrées et des options de personnalisation fournies par le thème Divi. En suivant cette procédure, vous pouvez créer un carrousel adapté à votre contenu spécifique et à vos préférences de conception sans recourir à des plugins supplémentaires.
