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

{% block content %}
    <div class="content-swiper">
        <div class="slick-slider-container">
            <ul class="slick-slider__list js-slick-gal">
                {% for element in nested_fragments %}
                    <li>
                        {{ content_element(element)
                            | replace({
                                '<div class="content-image">': '',
                                '</div>': '',
                                '<figure>': '',
                                '</figure>': '',
                                '<figcaption>': '<div class="caption"><span>',
                                '</figcaption>': '</span></div>'
                              })
                            | raw 
                        }}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endblock %}

{% block script %}
    {% add "slider_bundle_js" to body %}
        <script type="text/javascript" src="{{ asset('files/cms62/res/js/slider.bundle.js') }}"></script>
    {% endadd %}
{% endblock %}