Skip to content
Contao Handbuch

fritzmg/contao-swiper

Der Contao-Swiper ersetzt den Contao-Core-Slider.

Die Erweiterung ersetzt den Slider des Inhaltselements .ce_slider (bis 4.13) mit dem Swiper. Ab Contao 5.3 ist der Swiper-Slider standardmäßig an Bord, die Erweiterung kann aber immer noch wie beschrieben mit den html5-Templates verwendet werden. Spätestens mit dem Umstieg auf die Twig-Templates erübrigt sich diese Erweiterung.

Contaoaktiv in
5.3birgit-koch-immobilien
5.3filz-und-freude
5.5sozialplattform

Contao 4.13

Section titled “Contao 4.13”

Bis Contao 4.13 waren die Wrapper-Elemente für den Core-Slider und für den Contao-Swiper gleich (Verschiedenes/Content-Slider - ce_slider), damit nicht versehentlich die falschen Wrapper-Elemente verwendet werden. Es wurden nur andere Templates für die Elemente verwendet.

Contao 5.3

Section titled “Contao 5.3”

Ab Contao 5.3 müssen die Inhaltselemente Content-Slider/Slider Umschlag Anfang und Content-Slider/Slider Umschlag Ende angelegt werden. Diese verwenden, wie auch schon die Vorgängerversion in Contao 4.x, die Templates ce_swiperStartund ce_swiperStop. Einstellungen werden aber nicht in den Templates, sondern im Inhaltselement vorgenommen.

How To

Section titled “How To”
  • Inhaltselemente Content-Slider/Slider Umschlag Anfang und Content-Slider/Slider Umschlag Ende anlegen
  • JavaScript-Template js_slider im Seitenlayout aktivieren
  • Einstellungen im Inhaltselement Content-Slider/Slider Umschlag Anfang
  • zusätzliche Optionen konfigurierbar unter Experteneinstellungen > Eigene Optionen
  • Einstellungsmöglichkeiten: Swiper API

Swipen durch Nachrichtenbeiträge

Section titled “Swipen durch Nachrichtenbeiträge”
  • Frage dazu im Forum
  • Das Modul-Newslist bekommt eine Klasse (z.B. .swiper-news)
  • PRÜFEN: Anzahl an Elementen muss 1 sein, sonst werden mehrere gleichzeitig geslidet!
  • Diese Klasse wird im Element Content-Slider/Slider Umschlag Anfang im Feld Wrapper CSS Klasse eingetragen.

Contao 5.7 - ohne Erweiterung

Section titled “Contao 5.7 - ohne Erweiterung”
  • Elementtyp Content-Slider anlegen (das ist ein eigener Wrapper, es braucht keine Start-/Stop-Elemente mehr)
  • Im Content-Slider können das Slide-Intervall und die Übergangsgeschwindigkeit eingestellt werden, ebenso der Versatz und ob der Slider kontinuierlich sein soll
  • Weitere Einstellungen können im Twig-Template content-element/swiper gemacht werden - dort steht auch ein Beispiel, z.B. für den fadeEffect
  • Einstellungsmöglichkeiten: Swiper API
{% extends "@Contao/content_element/swiper.html.twig" %}


{#
    Adjust how any blocks of parent or used component templates are rendered.
    Try typing "block" or "use" to get autocompletion for available options.
#}


{% block content %}
    {% set slider_settings = slider_settings|merge({
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
    }) %}
{{ parent() }}
{% endblock %}