swiper.html.twig wenn meherere Content Slider auf einer Seite eingebunden sind

[derRenner]

Hallo,

ich beziehe mich auf die Versionen 5.3.9, 5.3.10 und 5.3.11 (andere Versionen habe ich nicht getestet) - da hier jeweils (für mich) das idente Problem aufgetaucht ist.

Ausgangslage:
Auf einer Seite sind mehrere Content-Slider eingebunden.
Jeder der Elemente benötigt andere Optionen zur Darstellung

Problematik:
die Initialisierung der Content-Slider funktioniert nicht mehr korrekt, sodass unerwünschte Effekte auftauchen

Lösung(sansatz):
jeder Content-Slider der Seite erhält ein eigenes angepasstes *.html.twig-Template


/templates/content_element/swiper.html.twig

{% extends "@Contao/content_element/swiper.html.twig" %} 

/templates/content_element/swiper/hauptslider.html.twig
(dieser dient bei mir als Header-Slider)

1. Ich füge der Klasse .swiper eine zusätzliche Klasse .mainslider hinzu » Zeile 6
2. Ich erweitere swiper_js um eine beliebigen Zusatz auf swiper_js_hauptslider » Zeile 20
3. Ich selektiere nun nach .swiper.mainslider » Zeile 28
4. Ich füge meine neuen gewünschten Optionen hinzu » ab Zeile 43

Das ergibt für das hautpslider.html.twig folgenden Inhalt:

{% extends "@Contao/content_element/swiper.html.twig" %}


{% block content %}
    {% set slider_attributes = attrs()
        .addClass('swiper mainslider') {# ANPASSUNG #}
        .set('data-delay', delay)
        .set('data-speed', speed)
        .set('data-offset', offset)
        .set('data-loop', loop)
        .mergeWith(slider_attributes|default)
    %}

    {{ parent() }}

{% endblock %}

{% block script %}

    {% add "swiper_js_hauptslider" to body %} {# ANPASSUNG #}
        {% set script_attributes = attrs()
            .setIfExists('nonce', csp_nonce('script-src'))
            .mergeWith(script_attributes|default)
        %}
        <script src="{{ asset('js/swiper-bundle.min.js', 'contao-components/swiper') }}"></script>
        <script{{ script_attributes }}>
            (function() {
                const swiper = document.querySelectorAll('.swiper.mainslider'); {# ANPASSUNG #}
                swiper.forEach (el => {
                    let opts = {
                        speed: el.getAttribute('data-speed'),
                        initialSlide: el.getAttribute('data-offset'),
                        loop: el.hasAttribute('data-loop'),
                    };

                    let delay = el.getAttribute('data-delay');
                    if (delay > 0) {
                        opts['autoplay'] = { delay: delay };
                    }

                    new Swiper(el, Object.assign({
                        {% block init_options %}
                            pagination: {
                                el: '.swiper-pagination',
                                clickable: true,
                            },
                            navigation: {
                                prevEl: '.swiper-button-prev',
                                nextEl: '.swiper-button-next',
                            },
                            {# Put custom options here #}
                        {% endblock %}
                    }, opts));
                });
            })();
        </script>
    {% endadd %}
{% endblock %} 

Mit weiteren, auf der gleichen Seite eingebettete Content-Slider-Elemente verfahre ich auf gleicher Weise.
Ein weiteres Content-Slider sieht dann bei mir so aus:
(obige 4 Punkte werden angepasst - in diesem Fall ist es so angepasst, dass je breakpoint unterschiedliche Anzahl an Bilder dargestellt werden.)

/templates/content_element/swiper/responsiveSliderVier.html.twig

{% extends "@Contao/content_element/swiper.html.twig" %}


{% block content %}
    {% set slider_attributes = attrs()
        .addClass('swiper respSliderFour') {# ANPASSUNG #}
        .set('data-delay', delay)
        .set('data-speed', speed)
        .set('data-offset', offset)
        .set('data-loop', loop)
        .mergeWith(slider_attributes|default)
    %}

    {{ parent() }}

{% endblock %}

{% block script %}

    {% add "swiper_js_auszeichnungen-bilder" to body %} {# ANPASSUNG #}
        {% set script_attributes = attrs()
            .setIfExists('nonce', csp_nonce('script-src'))
            .mergeWith(script_attributes|default)
        %}
        <script src="{{ asset('js/swiper-bundle.min.js', 'contao-components/swiper') }}"></script>
        <script{{ script_attributes }}>
            (function() {
                const swiper = document.querySelectorAll('.swiper.respSliderFour'); {# ANPASSUNG #}
                swiper.forEach (el => {
                    let opts = {
                        speed: el.getAttribute('data-speed'),
                        initialSlide: el.getAttribute('data-offset'),
                        loop: el.hasAttribute('data-loop'),
                    };

                    let delay = el.getAttribute('data-delay');
                    if (delay > 0) {
                        opts['autoplay'] = { delay: delay };
                    }

                    new Swiper(el, Object.assign({
                        {% block init_options %}
                            slidesPerView: 1,
                            navigation: {
                                prevEl: '.swiper-button-prev',
                                nextEl: '.swiper-button-next',
                            },
                            breakpoints: {
                                576: {
                                    slidesPerView: 2,
                                },
                                768: {
                                    slidesPerView: 3,
                                },
                                992: {
                                    slidesPerView: 4,
                                },
                            },
                            {# Put custom options here #}
                        {% endblock %}
                    }, opts));
                });
            })();
        </script>
    {% endadd %}
{% endblock %} 

Damit konnte ich für mich eine Lösung finden, wie mehrere Slider, mit unterschiedlichen Optionen je Seite, unabhängig von einander agieren können.

Bemerkung:
Nur die Anpassung aus Zeile 20 brachte noch kein positives Ergebnis bei mir.
Siehe auch Feature Request #7271