UD Block: Fade Slider
Ein flexibler WordPress-Block zur Erstellung automatisch überblendender Slider. Die Slides können beliebige Inhalte enthalten (Bilder, Text, Gruppen, Cover-Blöcke etc.).
by ulrich.digital gmbh · github.com/ulrich-digital/ud-fade-slider-block
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/ulrich-digital/ud-fade-slider-block/archive/refs/heads/main.zipEin Gutenberg-Block für automatisch überblendende Inhaltsfolgen. Jede Slide wird mit beliebigen Gutenberg-Blöcken aufgebaut und kann dadurch Bilder, Texte, Gruppen, Cover-Blöcke und weitere Inhalte aufnehmen.
Funktionen
- Automatisch überblendende Folge frei gestaltbarer Inhalte
- Übergeordneter Fade Slider mit mehreren untergeordneten Fade Slides
- Beliebige Gutenberg-Blöcke innerhalb jeder Slide
- Zentrale Steuerung von Übergang, automatischer Wiedergabe und Endlosschleife
- Individuelle Anzeigedauer pro Slide
- Einstellung zum Pausieren bei Hover
- Temporäres Ausblenden einzelner Slides
Screenshots
Die Editoransicht zeigt drei eigenständig aufgebaute Slides sowie die zentralen Einstellungen für Ablauf und Übergang.
Aufbau
Parent-Block: Fade Slider
Container für mehrere Slides. Er steuert den Ablauf und die weiche Überblendung der gesamten Inhaltsfolge.
- Übergangsdauer – bestimmt die Dauer der weichen Überblendung
- Automatisch abspielen – startet die Inhaltsfolge selbstständig
- Endlosschleife – beginnt nach der letzten Slide wieder von vorne
- Bei Hover pausieren – steuert die vorgesehene Unterbrechung bei Mauszeigerkontakt
Child-Block: Fade Slide Item
Eine einzelne Inhaltsfläche innerhalb des Sliders. Sie kann beliebige Gutenberg-Blöcke enthalten.
- Anzeigedauer – legt in Sekunden fest, wie lange die Slide sichtbar bleibt
- Slide ausblenden – deaktiviert eine vorbereitete Slide temporär, während ihr Inhalt erhalten bleibt
Technische Details
- Fade-Wechsel auf Basis von CSS-Transitions (
opacity) - Steuerung durch JavaScript ohne zusätzliches Slider-Framework
- Verschachtelte Blockstruktur mit einem übergeordneten Slider und frei aufgebauten Slides
- Responsiv und mit dem WordPress Site Editor kompatibel
Installation
- Ordner
ud-fade-slider-blocknach/wp-content/plugins/kopieren - Im Backend unter Plugins → Installierte Plugins aktivieren
- Den Block im Editor einfügen und konfigurieren
Anforderungen
- WordPress 6.7 oder neuer
- PHP 8.0+
Einblicke in die Umsetzung
Der Beitrag gibt Einblick in die entwickelte Lösung und ihre Funktionsweise. Das Projekt zeigt den konkreten Einsatz.
- Mehr zur Lösung: Bilder und Inhalte in WordPress dynamisch präsentieren
- Einblick ins Projekt: Bildung durchdacht vernetzt
Autor
Lizenz
Dieses Projekt steht unter der ulrich.digital Nutzungslizenz 1.0.
Die unveränderte Software darf in eigenen und kommerziellen Projekten eingesetzt werden. Auf jeder öffentlich erreichbaren Website oder Anwendung muss ulrich.digital gmbh im Impressum, in einem Credits-Bereich oder auf einer vergleichbaren Informationsseite genannt werden. Verkauf, eigenständige Weitergabe, Unterlizenzierung und Änderungen bedürfen der vorherigen schriftlichen Zustimmung von ulrich.digital gmbh.
Komponenten Dritter behalten ihre jeweiligen Lizenz- und Nutzungsbedingungen.