Carrouselschuifregelaars worden algemeen omarmd in webontwerp vanwege hun vermogen om diensten, afbeeldingen, functies en diverse andere inhoud efficiënt te presenteren zonder overmatig veel ruimte in beslag te nemen. Door een carrousel te implementeren, kunt u het ruimtegebruik optimaliseren en de algehele gebruikerservaring verbeteren.
In deze handleiding begeleid ik u door het proces van het integreren van carrouselfunctionaliteit in uw Divi- website. We maken gebruik van de Swiper.js-bibliotheek van een externe bron en passen aangepaste CSS toe om de schuifregelaar aan uw voorkeuren aan te passen.
Om slider-functionaliteit in uw Divi-website op te nemen, roept u eenvoudigweg de swiper.js-bibliotheek op in het function.php-bestand van uw child-thema.
Ontwerp een carrouselschuifregelaar zonder plug-in
Om functionaliteit voor onze slider mogelijk te maken, moeten we de swiper.js-bibliotheek opnemen in het function.php-bestand van ons Divi-kindthema.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nuBovendien moeten we configuratiecode invoegen die parameters specificeert zoals het aantal kolommen dat in de schuifregelaar moet worden weergegeven, of dia's in een lus moeten worden geplaatst en of pijlnavigatie en paginering moeten zijn ingeschakeld, naast andere instellingen.
Voor een uitgebreide lijst met beschikbare configuraties verwijzen wij u naar de Swiper API-pagina . Laten we nu eens in de implementatie duiken.
Alle PHP-code moet worden opgenomen in het function.php-bestand van het Divi-kindthema. U kunt dit bestand bewerken via FTP, Bestandsbeheer op uw server of door de Thema-editor te gebruiken die toegankelijk is in het WordPress Dashboard. In dit geval gaan we verder met de Thema-editor.
Volg deze stappen om de swiper.js-bibliotheek in ons child-thema in de wachtrij te plaatsen:
- Navigeer naar Vormgeving → Thema-editor
- Open het function.php-bestand in uw child-thema en voeg aangepaste PHP-code toe.
<?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'); - Selecteer Bestand bijwerken.
Nu moeten we de Divi Builder gebruiken om alle dingen te maken die in onze schuifregelaar worden weergegeven. Aangepaste rij-, kolom- en moduleklassen en ID's moeten worden toegevoegd. Er kan slechts één kolomindeling zijn en deze wordt geconverteerd naar een carrousel op basis van de kolomnummers die zijn opgegeven in de PHP-instellingen.
Ik heb voor dit voorbeeld Blurb-modules met een aantal prachtige ontwerp- en zweefeffecten gebruikt, maar je kunt elke gewenste Divi-module gebruiken.
Voeg een sectie met één kolomrij toe aan uw pagina met behulp van de Divi Builder.
Zoek de Blurb-module en voeg deze toe aan de pagina.
Rij-instellingen zijn toegankelijk door op het tandwielsymbool in de groene werkbalk te klikken.
Selecteer Geavanceerde CSS-ID en -klassen.
Neem dp-carousel op in het veld CSS-klasse.
Ga naar het tabblad Inhoud
Open Kolominstellingen en voeg de klasse swiper-wrapper toe aan het veld CSS-klasse.
Om de blurb-module aan te passen, opent u de module-instellingen en gaat u naar het tabblad Geavanceerd. Voeg vervolgens swiper-slide toe aan het CSS-veld.
Navigeer naar het tabblad Inhoud en klik op de schakelaar Tekst.
Voeg titel en hoofdtekst toe.
Voeg een achtergrondafbeelding toe via de achtergrondschakelaar.
Voor het titeltekstontwerp zijn hier de instellingen:
- Titellettertype – Abhaya Libre
- Kleur – #415962
- Titeltekstgrootte – 26px en 22px op mobiele telefoons
Volg deze instellingen voor de hoofdtekst.
- Titellettertype – Open Sans
- Kleur – #879296
- Grootte van hoofdtekst – 14px en 12px op mobiele telefoons
- Lichaamslijnhoogte: 1,5 em
In deze laatste fase voegen we een Blurb-afstand en aangepaste CSS toe om de inhoudscontainer een witte achtergrond en een zoomanimatie op de achtergrondafbeelding te geven.
Zet de schakelaar Ontwerpafstand in de Blurb-instellingen.
- Er moet opvulling voor desktops worden toegevoegd. 300px/1,5vw/1,5vw/1,5vw
- Er moet vulling voor tablets worden toegevoegd. 220px/30px/30px/30px
- Er moet vulling voor mobiele telefoons worden toegevoegd. 200px/20px/20px/20px
Navigeer naar het tabblad Geavanceerd en schakel het selectievakje Aangepaste CSS in.
Achtergrondgrootte: 100%.
Achtergrondovergang naar veld Hoofdelement.
Alle overgangen duren 0,5s.
Voeg bij het zweven een achtergrondgrootte en overgang naar het hoofdelement toe.
105% achtergrondgrootte; Alle overgangen duren 0,5s.
Plak deze voor de achtergrondkleur in het aangepaste CSS-veld.
background-color: white;
padding: 30px 1.5vw;Je moet ook achtergrondkleur en opvulling toevoegen aan Blurb Contentfield tijdens het zweven.
background-color: white;
padding: 30px 4vw;
Nu we de Blurb-module hebben voltooid, kunnen we deze zo vaak repliceren als we willen en nieuwe teksten aan onze carrousel toevoegen. U hoeft alleen de woorden te vervangen en de achtergrondafbeelding in elke gekopieerde module te wijzigen.
Onze slider is bijna klaar. Ten slotte voegen we wat aangepaste CSS toe om onze slidernavigatie en paginering te verfraaien. Deze code kan in het Divi/Theme Options/Custom CSS of het style.css-bestand van uw child-thema worden geplaatst.
/* 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;
}
Nu is hier de laatste dia.
Laatste woorden
Als u een carrousel in Divi maakt zonder een plug-in te gebruiken, moet u gebruik maken van de ingebouwde functionaliteit en aanpassingsmogelijkheden van het Divi-thema. Door deze procedure te volgen, kunt u een carrousel maken die is afgestemd op uw specifieke inhouds- en ontwerpvoorkeuren, zonder dat u afhankelijk bent van extra plug-ins.
