# WordPress Carousel Slider ## Die Idee ### Viele Inhalte. Ein klarer Rahmen. #### Referenzen, Bildstrecken oder Videos brauchen Platz. Ein Karussell zeigt sie nacheinander und lässt Besucher einzelne Medien in einer Lightbox öffnen. LU Carousel Slider liest dafür einen festgelegten Medienordner aus. Sie konfigurieren die Darstellung in [WordPress] (https://de.wikipedia.org/wiki/WordPress) und binden die Galerie per Shortcode ein. Für individuell aufgebaute Inhaltsbereiche gibt es zusätzlich eine Integration über [CSS-Klassen] (https://de.wikipedia.org/wiki/Cascading _Style _Sheets) . - ! [Demo Logos: logo-046] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-046.webp) - ! [Demo Logos: logo-072] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-072.webp) - ! [Demo Logos: logo-083] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-083.webp) - ! [Demo Logos: logo-051] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-051.webp) - ! [Demo Logos: logo-032] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-032.webp) - ! [Demo Logos: logo-019] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-019.webp) - ! [Demo Logos: logo-067] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-067.webp) - ! [Demo Logos: logo-048] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-048.webp) - ! [Demo Logos: logo-085] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-085.webp) - ! [Demo Logos: logo-081] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-081.webp) - ! [Demo Logos: logo-028] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-028.webp) - ! [Demo Logos: logo-077] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-077.webp) - ! [Demo Logos: logo-033] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-033.webp) - ! [Demo Logos: logo-073] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-073.webp) - ! [Demo Logos: logo-012] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-012.webp) - ! [Demo Logos: logo-070] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-070.webp) - ! [Demo Logos: logo-003] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-003.webp) - ! [Demo Logos: logo-016] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-016.webp) - ! [Demo Logos: logo-088] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-088.webp) - ! [Demo Logos: logo-044] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-044.webp) - ! [Demo Logos: logo-022] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-022.webp) - ! [Demo Logos: logo-035] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-035.webp) - ! [Demo Logos: logo-078] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-078.webp) - ! [Demo Logos: logo-090] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-090.webp) - ! [Demo Logos: logo-026] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-026.webp) - ! [Demo Logos: logo-057] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-057.webp) - ! [Demo Logos: logo-053] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-053.webp) - ! [Demo Logos: logo-061] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-061.webp) - ! [Demo Logos: logo-065] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-065.webp) - ! [Demo Logos: logo-006] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-006.webp) - ! [Demo Logos: logo-001] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-001.webp) - ! [Demo Logos: logo-030] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-030.webp) - ! [Demo Logos: logo-096] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-096.webp) - ! [Demo Logos: logo-020] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-020.webp) - ! [Demo Logos: logo-036] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-036.webp) - ! [Demo Logos: logo-023] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-023.webp) - ! [Demo Logos: logo-099] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-099.webp) - ! [Demo Logos: logo-029] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-029.webp) - ! [Demo Logos: logo-068] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-068.webp) - ! [Demo Logos: logo-064] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-064.webp) - ! [Demo Logos: logo-021] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-021.webp) - ! [Demo Logos: logo-015] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-015.webp) - ! [Demo Logos: logo-060] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-060.webp) - ! [Demo Logos: logo-095] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-095.webp) - ! [Demo Logos: logo-043] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-043.webp) - ! [Demo Logos: logo-049] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-049.webp) - ! [Demo Logos: logo-037] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-037.webp) - ! [Demo Logos: logo-007] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-007.webp) - ! [Demo Logos: logo-097] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-097.webp) - ! [Demo Logos: logo-024] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-024.webp) - ! [Demo Logos: logo-091] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-091.webp) - ! [Demo Logos: logo-087] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-087.webp) - ! [Demo Logos: logo-059] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-059.webp) - ! [Demo Logos: logo-050] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-050.webp) - ! [Demo Logos: logo-063] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-063.webp) - ! [Demo Logos: logo-074] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-074.webp) - ! [Demo Logos: logo-058] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-058.webp) - ! [Demo Logos: logo-018] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-018.webp) - ! [Demo Logos: logo-017] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-017.webp) - ! [Demo Logos: logo-009] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-009.webp) - ! [Demo Logos: logo-005] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-005.webp) - ! [Demo Logos: logo-014] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-014.webp) - ! [Demo Logos: logo-100] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-100.webp) - ! [Demo Logos: logo-080] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-080.webp) - ! [Demo Logos: logo-034] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-034.webp) - ! [Demo Logos: logo-082] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-082.webp) - ! [Demo Logos: logo-013] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-013.webp) - ! [Demo Logos: logo-004] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-004.webp) - ! [Demo Logos: logo-094] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-094.webp) - ! [Demo Logos: logo-047] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-047.webp) - ! [Demo Logos: logo-045] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-045.webp) - ! [Demo Logos: logo-042] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-042.webp) - ! [Demo Logos: logo-098] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-098.webp) - ! [Demo Logos: logo-084] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-084.webp) - ! [Demo Logos: logo-040] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-040.webp) - ! [Demo Logos: logo-054] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-054.webp) - ! [Demo Logos: logo-092] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-092.webp) - ! [Demo Logos: logo-089] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-089.webp) - ! [Demo Logos: logo-011] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-011.webp) - ! [Demo Logos: logo-086] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-086.webp) - ! [Demo Logos: logo-027] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-027.webp) - ! [Demo Logos: logo-056] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-056.webp) - ! [Demo Logos: logo-076] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-076.webp) - ! [Demo Logos: logo-052] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-052.webp) - ! [Demo Logos: logo-039] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-039.webp) - ! [Demo Logos: logo-010] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-010.webp) - ! [Demo Logos: logo-025] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-025.webp) - ! [Demo Logos: logo-041] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-041.webp) - ! [Demo Logos: logo-062] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-062.webp) - ! [Demo Logos: logo-002] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-002.webp) - ! [Demo Logos: logo-093] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-093.webp) - ! [Demo Logos: logo-008] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-008.webp) - ! [Demo Logos: logo-066] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-066.webp) - ! [Demo Logos: logo-055] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-055.webp) - ! [Demo Logos: logo-071] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-071.webp) - ! [Demo Logos: logo-038] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-038.webp) - ! [Demo Logos: logo-069] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-069.webp) - ! [Demo Logos: logo-031] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-031.webp) - ! [Demo Logos: logo-079] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-079.webp) - ! [Demo Logos: logo-075] (/wp-content/uploads/lu-carousel-slider/demo-logos/thumbs/logo-075.webp) - [! [Demo Nature: nature-13] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-13.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-13.jpeg) - [! [Demo Nature: nature-18] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-18.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-18.jpeg) - [! [Demo Nature: nature-21] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-21.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-21.jpeg) - [! [Demo Nature: nature-08] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-08.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-08.jpeg) - [! [Demo Nature: nature-03] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-03.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-03.jpeg) - [! [Demo Nature: 2] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/2.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/2.mp4) - [! [Demo Nature: nature-22] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-22.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-22.jpeg) - [! [Demo Nature: nature-04] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-04.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-04.jpeg) - [! [Demo Nature: nature-19] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-19.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-19.jpeg) - [! [Demo Nature: nature-14] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-14.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-14.jpeg) - [! [Demo Nature: nature-02] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-02.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-02.jpeg) - [! [Demo Nature: nature-15] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-15.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-15.jpeg) - [! [Demo Nature: nature-05] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-05.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-05.jpeg) - [! [Demo Nature: nature-09] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-09.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-09.jpeg) - [! [Demo Nature: nature-16] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-16.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-16.jpeg) - [! [Demo Nature: nature-12] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-12.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-12.jpeg) - [! [Demo Nature: nature-10] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-10.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-10.jpeg) - [! [Demo Nature: nature-07] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-07.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-07.jpeg) - [! [Demo Nature: nature-06] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-06.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-06.jpeg) - [! [Demo Nature: nature-24] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-24.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-24.jpeg) - [! [Demo Nature: nature-17] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-17.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-17.jpeg) - [! [Demo Nature: nature-20] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-20.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-20.jpeg) - [! [Demo Nature: nature-23] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-23.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-23.jpeg) - [! [Demo Nature: nature-01] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-01.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-01.jpeg) - [! [Demo Nature: 6] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/6.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/6.mp4) - [! [Demo Nature: 1] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/1.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/1.mp4) - [! [Demo Nature: nature-11] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-11.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-11.jpeg) - [! [Demo Nature: 4] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/4.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/4.mp4) - [! [Demo Nature: 3] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/3.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/3.mp4) - [! [Demo Nature: 5] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/5.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/5.mp4) - [! [Demo Nature: nature-25] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/nature-25.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/nature-25.jpeg) - [! [Demo Nature: 7] (/wp-content/uploads/lu-carousel-slider/demo-nature/thumbs/7.webp) ] (/wp-content/uploads/lu-carousel-slider/demo-nature/7.mp4) ## Funktionen ### Was der WordPress Carousel Slider leistet. Von der Mediendatei bis zur Darstellung. Direkt in Ihrer WordPress-Website. #### Ein Ordner wird zur Galerie. Das Plugin erkennt unterstützte Dateien in einem gewählten Upload-Unterordner und erstellt daraus die Slides. Die Reihenfolge richtet sich nach dem Dateinamen oder wird zufällig gewählt. - JPG, JPEG, PNG, GIF, WebP und SVG - MP4- und WebM-Videos - Aufsteigend, absteigend oder zufällig #### Bewegung nach Ihren Vorgaben. Klassisches Karussell oder kontinuierliche Laufschrift: Legen Sie fest, wie Besucher Ihre Inhalte durchlaufen. Pfeile, Seitennavigation und automatischer Wechsel sind konfigurierbar. - Autoplay mit einstellbarem Intervall - Übergangs- und Laufschriftgeschwindigkeit - Optionale Pause bei Hover und Fokus #### Medien im Mittelpunkt. Die zuschaltbare Lightbox öffnet Bilder und spielt lokale Videos ab. Ein Bild mit gleichem Dateistamm kann als Videoposter dienen – etwa projekt.jpg für projekt.mp4. - Bilder in vergrößerter Galerieansicht - Video-Wiedergabe in der Lightbox - Play-Symbol auf Videovorschauen #### Einstellen. Code übernehmen. Im WordPress-Adminbereich wählen Sie Ordner, Höhe und Verhalten. Der Shortcode-Generator gibt den passenden Code aus, den Sie auf Ihrer Seite einfügen. - Eigene Höhen für Desktop, Tablet und Mobil - Optionales Lazy Loading - CSS-Editor für das eigene Design #### Jedes Medium mit Kontext. Im Bereich „Media Data“ pflegen Sie Titel, [Alt-Text] (https://www.sodah.de/onpage-seo-agentur/) und Ziel-URL pro unterstütztem Rasterbild beziehungsweise Videoeintrag. Ein hinterlegter Link hat Vorrang vor der Lightbox. - Individuelle statt nur globale Texte - Link im selben oder in neuem Tab - Metadaten in eigener WordPress-Tabelle #### Vorschaubilder wiederverwenden. Rasterbilder erhalten nach Möglichkeit eine [WebP-Vorschau] (https://de.wikipedia.org/wiki/WebP) in der eingestellten Höhe. Vorhandene Vorschaubilder werden wiederverwendet und lassen sich im Backend neu berechnen. - Bildverarbeitung mit Imagick oder GD - SVG-Dateien bleiben im Originalformat - Optionale Videovorschauen über einen externen Dienst ## Der Ablauf ### Vom Medienordner auf Ihre Website. 01 ### Medien bereitstellen Bilder und Videos in einem Unterordner von wp-content/uploads/lu-carousel-slider/ ablegen. Für eigene Videoposter identische Dateistämme verwenden. 02 ### Darstellung wählen Unter „Luna Universe → Carousel Slider“ den Ordner wählen, Höhe und Verhalten festlegen und den Shortcode erzeugen. Bei Bedarf Metadaten ergänzen. 03 ### Galerie einbinden Den Shortcode in einen WordPress-Bereich einfügen, der Shortcodes verarbeitet. Beim Seitenaufruf liest das Plugin die Dateien aus und erzeugt die Galerie. ## Unter der Oberfläche ### Die passende Technik dahinter. Das Plugin verbindet ein Karussell mit einer vergrößerten Medienansicht und Video-Wiedergabe. Die dafür verwendeten Frontend-Bibliotheken sind im Plugin enthalten. #### WORDPRESS ##### Auch eigene Inhalte können sliden. Entwickler können bestehende Container über die vorgesehenen CSS-Klassen als Slider oder Laufschrift anbinden. Dafür sind eine eindeutige ID und passend ausgezeichnete Slides nötig; eigene Pfeile lassen sich über die ID-Suffixe -prev und -next zuordnen. #### SERVER ##### Was die Installation voraussetzt. Der Code verwendet Funktionen ab [PHP 8.0] (https://de.wikipedia.org/wiki/PHP) . WordPress und ein beschreibbarer Plugin-Upload-Ordner werden benötigt. WebP-Vorschaubilder setzen passende Imagick- oder GD-Unterstützung voraus. Bei fehlgeschlagener Bildkonvertierung wird das Originalbild verwendet. #### OPTIONALER DIENST ##### Videovorschauen automatisch erzeugen. Für Videos ohne eigenes Poster kann das Plugin die ersten fünf Sekunden als animierte WebP-Vorschau erstellen lassen. Dazu überträgt es die Videodatei an einen externen Videodienst. Erforderlich sind ein [API-Schlüssel] (https://de.wikipedia.org/wiki/Programmierschnittstelle) , PHP-cURL und ausgehende Serververbindungen. #### DATEN & BETRIEB ##### Lokal verwaltet. Gezielt angebunden. Medien und Vorschaubilder liegen im WordPress-Upload-Verzeichnis. Titel, Alt-Texte und Links werden in einer eigenen Datenbanktabelle gespeichert; CSS und der optionale API-Schlüssel in WordPress-Optionen. ## Im Einsatz bei Sodah ### Ein Baustein für individuelle Websites. #### Sodah entwickelt LU Carousel Slider für die Darstellung visueller Inhalte in WordPress-Projekten. Ein konkretes Beispiel finden Sie auf unserer Seite zu LU Index Now: Dort zeigt das Karussell Screenshots aus dem Plugin. Die passende Konfiguration richtet sich nach den Medien, dem Layout und der Bedienung Ihrer Website. Sie möchten eine Referenzgalerie, eine Bildstrecke oder lokale Videos einbinden? Besprechen Sie den Einsatz mit uns im Rahmen Ihres Website-Projekts. [WordPress Webdesign] (https://www.sodah.de/webdesign-agentur/) [WordPress-Webentwicklung] (https://www.sodah.de/webentwicklung-agentur/) ## Häufige Fragen ### Gut zu wissen. Konkrete Antworten zu Funktionen, [Einrichtung] (https://www.sodah.de/webdesign-agentur/support-wartung/) und Grenzen. ### [Was ist LU Carousel Slider and Lightbox?] (#f13996db0be1a0336) LU Carousel Slider and Lightbox ist ein WordPress-Plugin von Sodah Webdesign. Es erstellt responsive Bild- und Videogalerien aus Upload-Unterordnern und verbindet ein Karussell mit einer Lightbox. Die Einbindung erfolgt per Shortcode; passend vorbereitete Inhaltscontainer können ebenfalls als Slider oder Laufschrift dargestellt werden. ### [Welche Bild- und Videoformate werden unterstützt?] (#6655a4333e05851b9) Die Galerie verarbeitet JPG, JPEG, PNG, GIF, WebP und SVG sowie lokale MP4- und WebM-Videos. Ein Rasterbild mit demselben Dateistamm kann als Videoposter dienen. Die individuelle Metadaten-Oberfläche berücksichtigt Rasterbilder und Videos; SVG-Dateien werden dort nicht aufgelistet. ### [Benötige ich Programmierkenntnisse?] (#0ebd811f442903934) Für die Shortcode-Einstellungen steht ein Generator im WordPress-Adminbereich bereit. Der Medienordner muss zuvor im Plugin-Upload-Verzeichnis angelegt und befüllt werden; eine eigene Upload-Oberfläche bietet das Plugin nicht. Individuelles CSS und die Integration eigener Inhaltscontainer erfordern technische Kenntnisse. ### [Läuft die Galerie automatisch?] (#fa1dd92cb9a129a63) Autoplay mit einstellbarem Intervall und eine kontinuierliche Laufschrift sind konfigurierbar. Beim Erzeugen der Seite liest das Plugin die vorhandenen Dateien im gewählten Ordner aus. Es gibt keinen eigenen Cronjob und keine Live-Überwachung des Ordners im Browser. Ein vorhandener Seiten-Cache kann verzögern, wann neue Medien sichtbar werden. ### [Welche Voraussetzungen bestehen?] (#fbdf97f30010dcc82) Erforderlich sind WordPress, ein beschreibbarer Upload-Ordner und PHP-Funktionen ab Version 8.0. Eine genaue WordPress-Mindestversion ist im Plugin nicht deklariert. Für WebP-Bildvorschauen wird Imagick oder GD mit WebP-Unterstützung benötigt. Automatisch erzeugte Videovorschauen benötigen zusätzlich Zugang zum externen Videodienst, PHP-cURL und ausgehende Serververbindungen. ### [Werden Medien an externe Dienste übertragen?] (#10f00e2c7cb3572a6) Bilder und eigene Videoposter werden lokal verarbeitet. Ist ein API-Schlüssel für den Videodienst hinterlegt, können Videos ohne Poster zur Erstellung einer animierten Vorschau an einen externen Videodienst übertragen werden. Außerdem kontaktiert der Updater den Luna-Universe-Updateserver. Eine Einwilligungsverwaltung für diese Anbindungen ist nicht Bestandteil des Plugins. ### [Kann ich YouTube- oder Vimeo-Links im Generator eintragen?] (#aa7e0ad642d8fc957) Der vorhandene Shortcode-Generator arbeitet mit lokalen Medienordnern und bietet kein Eingabefeld für YouTube- oder Vimeo-URLs. Die mitgelieferte Lightbox-Bibliothek unterstützt solche Anbieter grundsätzlich; eine fertige Einbindung dieser Links über den Generator ist im Plugin jedoch nicht umgesetzt. ### [Wer darf die Einstellungen bearbeiten?] (#ff1532ca2e5925cf7) Das Plugin-Menü und der Shortcode-Generator setzen die WordPress-Berechtigung edit _posts voraus. Die zusätzlichen Reiter für CSS, Dokumentation und Mediendaten sowie die Schaltfläche zur Neuberechnung werden nur mit manage _options angezeigt. Das Speichern des API-Schlüssel für den Videodiensts verlangt ebenfalls manage _options. Mehrere Medien-AJAX-Aktionen prüfen dagegen edit _posts und einen Nonce.