{% if arImageList is not empty %}
<section class="carousel">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            {% for i in 1..arImageList|length %}
                <li data-target="#carouselExampleIndicators" data-slide-to="{{ i - 1 }}" class="{% if loop.first %}active{% endif %}"></li>
            {% endfor %}
        </ol>
        <div class="carousel-inner">
            {% for obImage in arImageList %}
            <div class="carousel-item {% if loop.first %}active{% endif %}">
                <img class="d-block w-100 carousel-item-img" src="{{ obImage.image|media }}" alt="{{ obImage.title }}" loading="lazy">
                <div class="carousel-caption">
                    <h5 class="mb-3 carousel-item__title">{{ obImage.title }}</h5>
                    <p class="d-none d-md-block">{{ obImage.description }}</p>
                    {% if obImage.link is not empty %}
                    <a class="btn btn-dark" href="{{ obImage.link }}" role="button">{{ obImage.link_name }}</a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>
{% endif %}