{% load static %}
<div class="relative w-full overflow-hidden">
    <div id="{{ carousel_id }}" class="flex w-full">
        {% for image in carousel_images %}
            <div class="w-full flex-shrink-0">
                <img src="{{ image }}" class="w-full object-cover">
            </div>
        {% endfor %}
    </div>
    {% if carousel_images|length > 1 %}
        <button onclick="{{ carousel_id }}_prev()"
                class="absolute left-2 top-1/2 -translate-y-1/2 bg-black/50 text-white px-3 py-1 rounded-full">
            &#8592;
        </button>
        <button onclick="{{ carousel_id }}_next()"
                class="absolute right-2 top-1/2 -translate-y-1/2 bg-black/50 text-white px-3 py-1 rounded-full">
            &#8594;
        </button>
        <div class="absolute bottom-2 w-full flex justify-center gap-2">
            {% for image in carousel_images %}
                <span class="{{ carousel_id }}_dot w-2 h-2 rounded-full bg-white opacity-50 cursor-pointer"
                      onclick="{{ carousel_id }}_goTo({{ forloop.counter0 }})"></span>
            {% endfor %}
        </div>
    {% endif %}
</div>
<script src="{% static 'js/carousel.js' %}"></script>
<script>initCarousel('{{ carousel_id }}');</script>