SplideJS mit GenerateBlocks nutzen

GenerateBlocks ist richtig flexibel und praktisch. Ich mag den minimalen Ansatz und das Klassen-System, richtig gut umgesetzt. Ich arbeite gerne damit.

Was mir dabei jedoch ab und zu gefehlt hat, waren Slider-Funktionen und Modals/Popups. Diese zwei Dinge möchte ich mit einer schlanken, eleganten Lösung noch implementieren. Tabs und Accordions funktionieren sauber und zuverlässig.

Kadence, BricksExtras, Oxyextras etc. nutzt für die Slider Blöcke/Komponenten Splide. Finde die Library flexibel und gut durchdacht.

Hier nun die Anleitung, wie du SplideJS Version 4 mit GenerateBlocks nutzen kannst.

1. SplideJS laden

html in wp_head

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/splide.min.css">

html in wp_footer
(mit AutoScroll – das ersetzt du am besten aber mit Marquees)

HTML

<!-- Include Splide JS -->
<script defer src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js"></script>

<!-- Include the AutoScroll extension -->
<script defer src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.1/dist/js/splide-extension-auto-scroll.min.js"></script>

2. Splide DOM Struktur anlegen

HTML

<!-- erster Slider -->
<section class="splide" id="first-slider">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 1</li>
			<li class="splide__slide">Slide 2</li>
			<li class="splide__slide">Slide 3</li>
		</ul>
	</div>
</section>

<!-- zweiter Slider -->
<section class="splide" id="second-slider">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 1</li>
			<li class="splide__slide">Slide 2</li>
			<li class="splide__slide">Slide 3</li>
		</ul>
	</div>
</section>

3. SplideJS initialisieren

JavaScript

document.addEventListener("DOMContentLoaded", function () {
    // Erster Slider mit jeweiligen Optionen
    var firstSlider = new Splide("#first-slider", {
        type: "loop", 
        arrows: true, 
        pagination: true, 
        autoScroll: { // AutoScroll Extension
            speed: 1, 
        },
    });

    // Zweiter Slider mit jeweiligen Optionen
    var secondSlider = new Splide("#second-slider", {
        type: "fade", 
        arrows: false, 
        pagination: false
    });

    // Beide Slider mounten
    firstSlider.mount(window.splide.Extensions); // Mit AutoScroll Extension
    secondSlider.mount(); // Standard, ohne Extensions
});

Ergänzungen

Am besten ist, wenn „splide__list“ ein ul element ist und die dazugehörigen „splide__slide“ li Elemente. Mit GB geht das aber nicht standardmässig, weil für Container Elemente keine ul oder li als Tags ausgewählt werden können.

Verschiedene Szenarien

Du hast nur einen Slider

Dann brauchst du die Slider nicht über deren #id zu mounten.

JavaScript

document.addEventListener("DOMContentLoaded", function () {
    var splide = new Splide(".splide", {
        type: "loop",
        arrows: true,
        pagination: true
        
    });

    splide.mount();
});

Du hast mehrere Slider aber alle haben die gleichen Optionen

Dann kannst du diese wie folgt mounten:

JavaScript

document.addEventListener("DOMContentLoaded", function () {
    var splide = new Splide(".splide", {
        type: "loop",
        arrows: true,
        pagination: true,
    });

    splide.mount();
});

var elms = document.getElementsByClassName("splide");
for (var i = 0; i < elms.length; i++) {
    new Splide(elms[i]).mount();
}