<?xml version="1.0"?>
<t name="Shop Product Carousel" t-name="website_sale.shop_product_carousel">
        <t t-set="product_carousel_block_name">Product Carousel</t>
        <div id="o-carousel-product" t-attf-class="#{len(product_images) &gt; 1 and 'o_carousel_not_single'} carousel slide position-sticky mb-3 overflow-hidden" t-att-data-name="product_carousel_block_name">
            <div class="o_carousel_product_outer carousel-outer position-relative d-flex align-items-center w-100 overflow-hidden">
                <span t-if="len(product_images) &gt; 1" t-attf-class="o_ribbon #{ribbon._get_position_class()} z-1" t-attf-style="#{text_color and ('color: %s; ' % text_color)}#{bg_color and 'background-color:' + bg_color}" t-out="ribbon['name'] or ''"/>
                <div class="carousel-inner h-100">
                    <t t-set="image_classes" t-value="'d-flex align-items-center justify-content-center h-100'"/>
                    <t t-foreach="product_images" t-as="product_image">
                        <div t-attf-class="carousel-item h-100 text-center#{' active' if product_image_first else ''}">
                            <t t-call="website_sale.shop_product_image"/>
                        </div>
                    </t>
                </div>
                <t t-if="len(product_images) &gt; 1">
                    <a class="carousel-control-prev" href="#o-carousel-product" role="button" data-bs-slide="prev">
                        <i class="oi oi-chevron-left oe_unmovable border bg-white text-900" role="img" aria-label="Previous" title="Previous"/>
                    </a>
                    <a class="carousel-control-next" href="#o-carousel-product" role="button" data-bs-slide="next">
                        <i class="oi oi-chevron-right oe_unmovable border bg-white text-900" role="img" aria-label="Next" title="Next"/>
                    </a>
                </t>
            </div>
        </div>
    </t>

    