Twig: Mehrere Swiper Slider auf einer Seite mit unterschiedlichen Einstellungen
Bezug nehmend auf diesen Post und diesen PR habe ich unter großer Mithilfe von Spooky ein neues Swiper Template gebaut und ein Beispielhaftes Varianten Template.
Das Problem war bisher, dass alle Änderungen am Swiper Template immer alle Swiper betrafen. Nun werden die Einstellungen als Data-Attribut jedem einzelnen Swiper angehangen und ausgelesen, statt in ein JS im <body> geschrieben zu werden.
swiper.html.twig:
PHP-Code:
{% extends "@Contao/content_element/_base.html.twig" %}
{% use "@Contao/component/_stylesheet.html.twig" %}
{% set slider_settings = {
speed: data.sliderSpeed,
offset: data.sliderStartSlide,
loop: data.sliderContinuous
} %}
{% if data.sliderDelay %}
{% set slider_settings = slider_settings|merge({ autoplay: { delay: data.sliderDelay } }) %}
{% endif %}
{% block content %}
{% set slider_attributes = attrs()
.addClass('swiper')
.set('data-settings', slider_settings|json_encode)
.mergeWith(slider_attributes|default)
%}
<div{{ slider_attributes }}>
{% set slider_wrapper_attributes = attrs()
.addClass('swiper-wrapper')
.mergeWith(slider_wrapper_attributes|default)
%}
<div{{ slider_wrapper_attributes }}>
{% block slides %}
{% for element in nested_fragments %}
{% block slide %}
{% set slide_attributes = attrs()
.addClass('swiper-slide')
.mergeWith(slide_attributes|default)
%}
<div{{ slide_attributes }}>
{% block slide_inner %}
{{ content_element(element) }}
{% endblock %}
</div>
{% endblock %}
{% endfor %}
{% endblock %}
</div>
{% block controls %}
{% set button_prev_attributes = attrs()
.set('type', 'button')
.addClass('swiper-button-prev')
.mergeWith(button_prev_attributes|default)
%}
<button{{ button_prev_attributes }}></button>
{% set button_next_attributes = attrs()
.set('type', 'button')
.addClass('swiper-button-next')
.mergeWith(button_next_attributes|default)
%}
<button{{ button_next_attributes }}></button>
{% set pagination_attributes = attrs()
.addClass('swiper-pagination')
.mergeWith(pagination_attributes|default)
%}
<div{{ pagination_attributes }}></div>
{% endblock %}
</div>
{% endblock %}
{% block script %}
{% add "swiper_js" to body %}
{% 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');
swiper.forEach (el => {
let opts = JSON.parse(el.getAttribute('data-settings') ?? '{}');
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 %}
{% block style %}
{% add "swiper_css" to stylesheets %}
{% with {file: swiper_css_file|default(asset('css/swiper-bundle.min.css', 'contao-components/swiper'))} %}
{{ block('stylesheet_component') }}
{% endwith %}
{% endadd %}
{% endblock %}
swiper/centered.html.twig für ein Template mit centered Modus:
PHP-Code:
{% extends "@Contao/content_element/swiper.html.twig" %}
{% block content %}
{% set slider_settings = slider_settings|merge({
centeredSlides: true,
})
%}
{{ parent() }}
{% endblock %}
