{% block style %}
<script async src="https://cdn.ampproject.org/v0.js"></script>

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>

{% endblock style %}
    
<amp-carousel id="carousel-with-preview" width="{{width}}" height="{{height}}" layout="responsive" type="slides"
    role="list" aria-label="Carousel with slide previews" autoplay delay="{{timer}}" loop>
    {% for content in content %}
    {% if content.value.image %}
    <a href="{% if content.value.link %}{{content.value.link}}{% elif content.value.page %}{{content.value.page.url}}{% else %}#{% endif %}"
        target="_blank">
        <img src="{{content.value.image.file.url}}" alt="{{content.value.image.title}}" class="w-full h-full">
        </img>
    </a>
    {% endif %}
    {% endfor %}


</amp-carousel>