{% if oArticleList and oArticleList.count() %}
    {# external resources #}
    {% if oViewConf.getViewThemeParam("blUseCDN") %}
        {{ style({ include: "https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.4/swiper-bundle.min.css" }) }}
        {{ script({ include: "https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.4/swiper-bundle.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
    {% else %}
        {{ style({ include: "libs/swiper/css/swiper-bundle.min.css" }) }}
        {{ script({ include: "libs/swiper/js/swiper-bundle.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
    {% endif %}

    {# own resources #}
    {{ style({ include: oViewConf.getVersionedModuleUrl("c4s_visual_cms_widgets", "out/src/css/c4s_action_slider.css") }) }}
    {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_visual_cms_widgets", "out/src/js/c4s_action_slider.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}

    <div class="row c4s-shortcode-{{ shortcode }} {{ class }}">
        {% if content and content|trim|length >= 12 %}
            <div class="col-12 pb-4 c4s-action-slider-text">
                {{ content|raw }}
            </div>
        {% endif %}

        <div class="col-12">
            <div class="c4s-action-gridView c4s-action-slider c4s-swiper-container position-relative">
                <div class="swiper{% if showPagination %} pb-5{% endif %}"
                     data-action-slider="true"
                     data-action-display-count="{{ count }}"
                     data-action-pagination="{% if showPagination %}true{% else %}false{% endif %}"
                     data-action-center-container="{% if containerPosition %}true{% else %}false{% endif %}"
                >
                    <div class="swiper-wrapper">
                        {% for oArticle in oArticleList %}
                            <div class="swiper-slide d-flex align-items-center c4s-article">
                                {{ include_widget({ cl: "oxwArticleBox", _parent: oViewConf.getActiveClassName(), _navurlparams: oViewConf.getNavUrlParams(), iLinkType: oArticle.getLinkType(), anid: oArticle.getId(), isVatIncluded: oView.isVatIncluded(), nocookie: 1, sWidgetType: "product", sListType: "listitem_grid", inlist: 1, skipESIforUser: 1 }) }}
                            </div>
                        {% endfor %}
                    </div>

                    {% if showPagination %}
                        <div class="swiper-pagination mt-2 bottom-0 px-2"></div>
                    {% endif %}

                    <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
                    <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
                </div>
            </div>
        </div>
    </div>
{% endif %}