fritzmg/contao-swiper

Die Erweiterung wird ev. nicht mehr gepflegt?

github Fragen?
wrapper für galerie frage im forum
Repository auf Github
Bundle auf packagist
Video Contao Academy
swiperjs.com
Ersetzt den Slider des Inhaltselements .ce_slider(bis 4.13) bzw. .content_element/swiper (ab 5.3) durch den Swiper
Kann durch einzelne Newsbeiträge sliden

Contao	aktiv in
5.3	filz-und-freude
5.5	sozialplattform
5.7	alpenrose-rohrmoos

Der Contao-Swiper ersetzt den Contao-Core-Slider.
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.

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:

Inhaltselemente Content-Slider/Slider Umschlag Anfang und Content-Slider/Slider Umschlag Ende anlegen
JavaScript-Template js_slider im Seitenlayout aktivieren
Das Slide-Intervall und die Übergangsgeschwindigkeit wird im Inhaltselement Content-Slider eingestellt.
~~Einstellungen im Inhaltselement Content-Slider/Slider Umschlag Anfang unter Experteneinstellungen > Eigene Optionen einfügen~~
Weitere Einstellungen im Twig-Template content-element/swiper machen - 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 %}

Swipen durch Nachrichtenbeiträge

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.~~ ACHTUNG das sind jetzt twig-Templates, siehe oben!