Contao · MIT-Lizenz

Carousel für Contao.

Beliebige Inhaltselemente als Slides, auf nativem Scroll-Snap. Kein Swiper, auch ohne JavaScript bedienbar.

InstallierenGitHub

Version 0.1.0 vom 01.10.2026 · Contao 5.7 und 6.0 · PHP 8.3+ (Contao 5.7), 8.4+ (Contao 6)

Gibt es auch als npm-Paket: @nordwerk/scroll-carousel.

Installation

Im Contao Manager nach nordwerk/contao-carousel-bundle suchen und das Paket installieren. Alternativ das Manager-ZIP aus den GitHub-Releases herunterladen und im Manager hochladen; anschließend die Datenbank aktualisieren.

Über Composer:

composer require nordwerk/contao-carousel-bundle
vendor/bin/contao-console contao:migrate

Installationshinweise und Voraussetzungen stehen auch im README.

Was es kann

Beliebige Inhaltselemente werden zu Slides; Elementgruppen bündeln mehrere Inhalte in einem Slide. Die Anzahl pro Ansicht richtet sich nach der Containerbreite, mit eigenen Werten für kleine, mittlere und große Flächen.

Pfeile, Punkte, Mausziehen und pausierbares Autoplay sind optional. Wischen und Einrasten funktionieren schon ohne JavaScript. Ein Schalter kann Standard-Swiper-Elemente des Contao-Kerns ersetzen; eigene Templates und alte Start-/Stop-Slider bleiben erhalten. Ein geklonter Endlosloop und frei gewählte Animationsgeschwindigkeiten gehören nicht dazu.

Erste Schritte im Backend

Lege in einem Artikel „Carousel“ an und vergib einen aussagekräftigen Namen für Hilfstechnologien. Füge über das Kind-Element-Symbol beliebige Inhalte ein: Ein direktes Kind ist ein Slide, eine Elementgruppe bündelt mehrere Inhalte in einem Slide.

Wähle die Anzahl pro Ansicht für kleine, mittlere und große Container (Breakpoints 600 und 960 px); auch Dezimalwerte sind möglich. Pfeile und Punkte sind optional. Autoplay 0 schaltet die Wiedergabe aus, aktive Intervalle liegen bei 1000–60000 ms und haben immer einen Pausenknopf.

Unter System → Einstellungen → Nordwerk Carousel kannst du den Ersatz für Kern-Swiper-Elemente mit Standard-Twig-Template einschalten. Der Schalter ist zunächst aus. Entferne manuell im Seitenlayout aktivierte Swiper-Skripte selbst und prüfe eigene Templates gesondert.

Twig-Integration

component/_nw_carousel.html.twig lässt sich ohne Inhaltselement als Include oder Embed verwenden; CSS und Module laden dabei einmal. Für eigenes Markup bindet nw_carousel_assets() die Assets ein, die Gestaltung folgt den Custom Properties von scroll-carousel.

Entwickelt im Contao-UI-Monorepo, als eigenes Composer-Paket veröffentlicht.

  • Verfügbar

    Galerie

    Raster, Leiste und Lightbox aus Carousel und Sheet, mit den Bildgrößen aus Contao.

    Zum Paket

Häufige Fragen

Welche Contao-Versionen unterstützt das Carousel?

Contao 5.7 mit PHP ab 8.3 und Contao 6 mit PHP ab 8.4. Die mitgelieferten Dateien von scroll-carousel sind fest versioniert; ein eigener JavaScript-Build ist nicht nötig.

Funktioniert das Carousel ohne JavaScript?

Ja. Scrollen, Touch-Wischen und Einrasten funktionieren mit nativem Scroll-Snap. JavaScript ergänzt Pfeile, Punkte, Mausziehen und pausierbares Autoplay.

Was unterscheidet es von Swiper und dem Kern-Slider?

Das Carousel nutzt natives Scrollen und beliebige Contao-Inhaltselemente. Der optionale Kern-Swiper-Ersatz ist zunächst ausgeschaltet und betrifft Standard-Twig-Templates. Eigene Templates und alte Start-/Stop-Slider bleiben erhalten; geklonte Endlosschleifen und frei gewählte Animationsgeschwindigkeiten gibt es nicht.

Wie passe ich das Carousel an mein Theme an?

Über die CSS Custom Properties von scroll-carousel und die Twig-Vorlagen content_element/nw_carousel.html.twig und component/_nw_carousel.html.twig. Eigene Bausteine können die Assets mit nw_carousel_assets() einmalig laden.

Was muss ich für Barrierefreiheit beachten?

Vergib im Backend einen aussagekräftigen Namen für Hilfstechnologien. Autoplay hat einen Pausenknopf, stoppt bei Tastaturfokus und startet bei reduzierter Bewegung pausiert. Prüfe außerdem Beschriftungen, Kontraste und Tastaturbedienung in deinem Theme.

Darf ich das Paket kommerziell einsetzen?

Ja. Bundle und mitgelieferte OSS-Komponente stehen unter der MIT-Lizenz. Der Lizenz- und Copyright-Hinweis muss bei Weitergabe erhalten bleiben.