{% load cms_tags thumbnail %}

{# Just a reference mock template for getting started #}
<div
    id="carousel-{{ carousel.id }}"
    data-interval="{{ carousel.interval_in_ms }}"
>
    {% for slide in slides %}
        {% if slide.has_link %}
            <a href="{{ slide.link }}">
        {% endif %}
        <div class="item{% if forloop.first %} active{% endif %}"
             style="background-image: url({% thumbnail slide.image 1920x600 crop upscale %}); min-height: 400px;">
            {% if slide.caption %}
                <div class="carousel-caption">{{ slide.caption }}</div>
            {% endif %}
            {% if slide.description %}
                <p class="carousel-description">{{ slide.description }}</p>
            {% endif %}
            {% if slide.has_call_to_action %}
                <a href="{{ slide.link }}" class="button">{{ slide.call_to_action_label }}</a>
            {% endif %}
        </div>
        {% if slide.has_link %}
            </a>
        {% endif %}
    {% endfor %}
</div>