{{ style({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/css/carousel.min.css') }) }}

<div class="dd-shortcode-{{ shortcode }} dd-carousel-slider{% if class %} {{ class }}{% endif %}">
    <div id="{{ carouselId }}" class="carousel slide" data-bs-ride="carousel" {% if interval %} data-bs-interval="{{ interval }}"{% endif %}>
        {% if bullets %}
            <div class="carousel-indicators">
                {% for image in images %}
                    {% if bullets %}
                        <button type="button" data-bs-target="#{{ carouselId }}"
                                data-bs-slide-to="{{ loop.index - 1 }}"{% if loop.index == 1 %} class="active" aria-current="true"{% endif %}
                                aria-label="{{ translate({ ident: "DD_VISUAL_EDITOR_WIDGET_CAROUSEL_SLIDE", args: loop.index }) }}"></button>
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}
        <div class="carousel-inner">
            {% for image in images %}
                <div class="carousel-item{% if loop.index == 1 %} active{% endif %}">
                    {% set imgTag %}
                        <img src="{{ image.sURL }}" class="d-block w-100" alt="{{ image.name }}">
                    {% endset %}
                    {% if image.link %}
                        <a href="{{ image.link }}">{{ imgTag }}</a>
                    {% else %}
                        {{ imgTag }}
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        {% if arrows %}
            <button class="carousel-control-prev" type="button" data-bs-target="#{{ carouselId }}" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">{{ translate({ ident: "DD_VISUAL_EDITOR_WIDGET_CAROUSEL_PREVIOUS" }) }}</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#{{ carouselId }}" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">{{ translate({ ident: "DD_VISUAL_EDITOR_WIDGET_CAROUSEL_NEXT" }) }}</span>
            </button>
        {% endif %}
    </div>
</div>