<div class="row mt-3 justify-content-center">
    <div class="col col-lg-8">
        <div data-controller="carousel" class="swiper-container position-relative overflow-hidden"
             data-carousel-options-value='{ "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" } }'>
            <div class="swiper-wrapper">
                {% if product.images is not empty %}
                    {% for image in product.images %}
                        <div class="swiper-slide">
                            <img src="{{ product|public_url_image(image) }}" alt="{{ product.name }}" class="product-img"/>
                        </div>
                    {% endfor %}
                {% elseif category.getImage() %}
                    <div class="swiper-slide">
                        <img src="{{ category|public_url }}" alt="{{ product.name }}" class="product-img">
                    </div>
                {% else %}
                    <div class="swiper-slide">
                        <img src="{{ asset('svg/product.svg') }}" alt="{{ product.name }}" class="product-img">
                    </div>
                {% endif %}
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
</div>
