Karussell-Schieberegler sind im Webdesign weit verbreitet, da sie Dienste, Bilder, Funktionen und verschiedene andere Inhalte effizient präsentieren können, ohne übermäßig viel Platz einzunehmen. Durch die Implementierung eines Karussells können Sie die Raumnutzung optimieren und das gesamte Benutzererlebnis verbessern.
In diesem Leitfaden begleite ich Sie durch den Prozess der Integration der Karussellfunktion in Ihre Divi- Website. Wir nutzen die Swiper.js-Bibliothek aus einer Drittanbieterquelle und wenden benutzerdefiniertes CSS an, um den Schieberegler an Ihre Vorlieben anzupassen.
Um die Slider-Funktionalität in Ihre Divi-Website zu integrieren, rufen Sie einfach die Bibliothek swiper.js in der Datei „functions.php“ Ihres untergeordneten Themes auf.
Entwerfen Sie einen Karussell-Slider ohne Plugin
Um die Funktionalität für unseren Slider zu aktivieren, müssen wir die Bibliothek swiper.js in die Datei „functions.php“ unseres Divi-Child-Themes einbinden.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangenDarüber hinaus müssen wir Konfigurationscode einfügen, der unter anderem Parameter wie die Anzahl der im Schieberegler anzuzeigenden Spalten, die Frage, ob die Folien in einer Schleife angezeigt werden sollen und ob die Pfeilnavigation und Paginierung aktiviert werden sollen, festlegt.
Eine umfassende Liste der verfügbaren Konfigurationen finden Sie auf der Swiper-API-Seite . Kommen wir nun zur Implementierung.
Der gesamte PHP-Code sollte in die Datei „functions.php“ des Divi-Child-Themes integriert werden. Sie können diese Datei über FTP, den Dateimanager auf Ihrem Server oder mithilfe des Theme-Editors, auf den Sie im WordPress-Dashboard zugreifen können, bearbeiten. In diesem Fall fahren wir mit dem Theme-Editor fort.
Führen Sie die folgenden Schritte aus, um die swiper.js-Bibliothek in unser untergeordnetes Thema einzureihen:
- Navigieren Sie zu Erscheinungsbild → Themeneditor
- Öffnen Sie die Datei „functions.php“ in Ihrem Child-Theme und fügen Sie benutzerdefinierten PHP-Code hinzu.
<?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'); - Wählen Sie Datei aktualisieren.
Jetzt müssen wir den Divi Builder verwenden, um alle Dinge zu erstellen, die in unserem Slider angezeigt werden. Benutzerdefinierte Klassen und IDs für Zeilen, Spalten und Module müssen hinzugefügt werden. Es kann nur ein Spaltenlayout geben und es wird basierend auf den im Einstellungs-PHP-Code angegebenen Spaltennummern in ein Karussell konvertiert.
Ich habe für dieses Beispiel Blurb-Module mit einigen schönen Design- und Hover-Effekten verwendet, aber Sie können jedes beliebige Divi-Modul verwenden.
Fügen Sie Ihrer Seite mit dem Divi Builder einen Abschnitt mit einer Spaltenzeile hinzu.
Suchen Sie das Blurb-Modul und fügen Sie es der Seite hinzu.
Auf die Zeileneinstellungen können Sie zugreifen, indem Sie auf das Zahnradsymbol in der grünen Symbolleiste klicken.
Wählen Sie Erweiterte CSS-ID und -Klassen aus.
Fügen Sie „dp-carousel“ in das Feld „CSS-Klasse“ ein.
Wechseln Sie zur Registerkarte „Inhalt“.
Öffnen Sie die Spalteneinstellungen und fügen Sie die Swiper-Wrapper-Klasse zum Feld „CSS-Klasse“ hinzu.
Um das Blurb-Modul anzupassen, öffnen Sie die Moduleinstellungen und wechseln Sie zur Registerkarte „Erweitert“. Fügen Sie dann „swiper-slide“ zum CSS-Feld hinzu.
Navigieren Sie zur Registerkarte „Inhalt“ und klicken Sie auf den Schalter „Text“.
Fügen Sie Titel und Text ein.
Fügen Sie über den Schalter „Hintergrund“ ein Hintergrundbild hinzu.
Nun zum Design des Titeltextes, hier sind die Einstellungen:
- Titelschriftart – Abhaya Libre
- Farbe – #415962
- Titeltextgröße – 26 Pixel und 22 Pixel auf Mobiltelefonen
Befolgen Sie für den Fließtext diese Einstellungen.
- Titelschriftart – Open Sans
- Farbe – #879296
- Körpertextgröße – 14 Pixel und 12 Pixel auf Mobiltelefonen
- Körperlinienhöhe: 1,5 cm
In dieser letzten Phase fügen wir einen Blurb-Abstand und benutzerdefiniertes CSS hinzu, um dem Inhaltscontainer einen weißen Hintergrund und eine Zoom-Animation zum Hintergrundbild zu geben.
Schalten Sie in den Blurb-Einstellungen den Schalter „Designabstand“ um.
- Polsterung für Desktops sollte hinzugefügt werden. 300px/1,5vw/1,5vw/1,5vw
- Polsterung für Tablets sollte hinzugefügt werden. 220px/30px/30px/30px
- Polsterung für Mobiltelefone sollte hinzugefügt werden. 200px/20px/20px/20px
Navigieren Sie zur Registerkarte „Erweitert“ und aktivieren Sie das Kontrollkästchen „Benutzerdefiniertes CSS“.
Hintergrundgröße: 100 %.
Hintergrundübergang zum Feld „Hauptelement“.
Alle Übergänge dauern 0,5 Sekunden.
Fügen Sie beim Hover eine Hintergrundgröße und einen Übergang zum Hauptelement hinzu.
105 % Hintergrundgröße; Alle Übergänge dauern 0,5 Sekunden.
Fügen Sie die Hintergrundfarbe in das benutzerdefinierte CSS-Feld ein.
background-color: white;
padding: 30px 1.5vw;Außerdem müssen Sie dem Feld „Blurb-Inhalt“ beim Bewegen des Mauszeigers Hintergrundfarbe und Auffüllung hinzufügen.
background-color: white;
padding: 30px 4vw;
Nachdem wir das Klappentext-Modul fertiggestellt haben, können wir es beliebig oft replizieren, um unserem Karussell neue Klappentexte hinzuzufügen. Sie müssen lediglich die Wörter ersetzen und das Hintergrundbild in jedem kopierten Modul ändern.
Unser Slider ist fast fertig. Abschließend fügen wir noch benutzerdefiniertes CSS hinzu, um unsere Slider-Navigation und -Paginierung zu dekorieren. Dieser Code kann in die Datei Divi/Theme Options/Custom CSS oder die style.css-Datei Ihres untergeordneten Themes eingefügt werden.
/* 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;
}
Hier ist nun die letzte Folie.
Letzte Worte
Um ein Karussell in Divi ohne die Verwendung eines Plugins zu erstellen, müssen die integrierten Funktionen und Anpassungsoptionen des Divi-Themes genutzt werden. Wenn Sie dieses Verfahren befolgen, können Sie ein Karussell erstellen, das auf Ihre spezifischen Inhalts- und Designvorlieben zugeschnitten ist, ohne auf zusätzliche Plugins angewiesen zu sein.
