{% load styling_tags wagtailimages_tags %}

<div id="carouselExampleCaptions" class="carousel slide {% get_styling_classes self.styling %}" {% get_styling self.styling %} data-bs-ride="carousel">
    <div class="carousel-inner">
        {% for slide in self.slides %}
        <div class="carousel-item{% if forloop.first %} active{% endif %} col-3">
            {% image slide.image width-1920 class="img-fluid w-100" %}
            <div class="carousel-caption d-none d-md-block">
                {{ slide.body }}
            </div>
            {% if slide.ribbon_color %}
            <span class="ribbon ribbon-{{ slide.ribbon_position }}" style="background-color: {{ slide.ribbon_color }};"></span>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>