design-themes/theme_alan/views/snippets/s_brand_slider.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="base_brand_slider_01">
    <div class="as-brand as-brand-card-01">
        <div class="as-brand-card-media">
            <img t-att-src="request.website.image_url(brand,'image_1024')"/>
        </div>
        <div class="as-brand-card-body" t-if="configuration.get('allow_link')">
            <a t-attf-href="/shop?brand={{brand.id}}"><t t-esc="brand.name"/></a>
        </div>
    </div>
</template>

<template id="base_brand_slider_02">
    <div class="as-brand as-brand-card-02">
        <div class="as-brand-card-media">
            <img t-att-src="request.website.image_url(brand,'image_1024')"/>
        </div>
        <div class="as-brand-card-body" t-if="configuration.get('allow_link')">
            <a t-attf-href="/shop?brand={{brand.id}}"><t t-esc="brand.name"/></a>
        </div>
    </div>
</template>


<template id="base_brand_slider_03">
    <div class="as-brand as-brand-card-03">
        <div class="as-brand-card-media">
            <img t-att-src="request.website.image_url(brand,'image_1024')"/>
        </div>
        <div class="as-brand-card-body" t-if="configuration.get('allow_link')">
            <a t-attf-href="/shop?brand={{brand.id}}"><t t-esc="brand.name"/></a>
        </div>
    </div>
</template>

<template id="base_brand_slider_04">
    <div class="as-brand as-brand-card-04">
        <div class="as-brand-card-media">
            <img t-att-src="request.website.image_url(brand,'image_1024')"/>
        </div>
        <div class="as-brand-card-body" t-if="configuration.get('allow_link')">
            <a t-attf-href="/shop?brand={{brand.id}}"><t t-esc="brand.name"/></a>
        </div>
    </div>
</template>

<template id="base_brand_slider_05">
    <div class="as-brand as-brand-card-05">
        <div class="as-brand-card-media">
            <img t-att-src="request.website.image_url(brand,'image_1024')"/>
        </div>
        <div class="as-brand-card-body" t-if="configuration.get('allow_link')">
            <a t-attf-href="/shop?brand={{brand.id}}"><t t-esc="brand.name"/></a>
        </div>
    </div>
</template>

<template id="as_brand_slider_one" name="Brand Slider 1">
    <t t-call="theme_alan.base_brand_slider_01"/>
</template>
<template id="as_brand_slider_two" name="Brand Slider 2">
    <t t-call="theme_alan.base_brand_slider_02"/>
</template>
<template id="as_brand_slider_three" name="brand Slider 3">
    <t t-call="theme_alan.base_brand_slider_03"/>
</template>
<template id="as_brand_slider_four" name="Brand Slider 4">
    <t t-call="theme_alan.base_brand_slider_04"/>
</template>
<template id="as_brand_slider_five" name="Brand Slider 5">
    <t t-call="theme_alan.base_brand_slider_05"/>
</template>


<template id="s_brand_slider" name="brand Slider">
    <div t-attf-class="swiper as_page_swiper" contenteditable="false">
        <div class="swiper-button-prev asi asi-chevron-left"></div>
        <div class="swiper-button-next asi asi-chevron-right"></div>
        <div class="swiper-wrapper">
            <t t-foreach="records" t-as="brand">
                <div t-attf-class="swiper-slide" >
                    <t t-if="configuration.get('slider_style') == 'as-slider-1'">
                        <t t-call="theme_alan.as_brand_slider_one"/>
                    </t>
                    <t t-if="configuration.get('slider_style') == 'as-slider-2'">
                        <t t-call="theme_alan.as_brand_slider_two"/>
                    </t>
                    <t t-if="configuration.get('slider_style') == 'as-slider-3'">
                        <t t-call="theme_alan.as_brand_slider_three"/>
                    </t>
                    <t t-if="configuration.get('slider_style') == 'as-slider-4'">
                        <t t-call="theme_alan.as_brand_slider_four"/>
                    </t>
                    <t t-if="configuration.get('slider_style') == 'as-slider-5'">
                        <t t-call="theme_alan.as_brand_slider_five"/>
                    </t>
                </div>
            </t>
        </div>
        <t t-if="configuration.get('pagination') != 'scroll_bar'">
            <div class="swiper-pagination"></div>
        </t>
        <t t-else="">
            <div class="swiper-scrollbar"></div>
        </t>

    </div>
</template>

<!-- <template id="base_brand_grid" name="Base Grid">
    <div t-attf-class="col-#{col_size}">
        <img t-att-src="request.website.image_url(brand,'image_1024')" width="100" height="100"/>
        <h3><a t-attf-href="/shop?brand={{brand.id}}"><t t-esc="brand.name"/></a></h3>
    </div>
</template> -->

<template id="as_brand_grid_one" name="brand Grid 1">
    <t t-call="theme_alan.base_brand_slider_01"/>
</template>
<template id="as_brand_grid_two" name="brand Grid 2">
    <t t-call="theme_alan.base_brand_slider_02"/>
</template>
<template id="as_brand_grid_three" name="brand Grid 3">
    <t t-call="theme_alan.base_brand_slider_03"/>
</template>
<template id="as_brand_grid_four" name="brand Grid 4">
    <t t-call="theme_alan.base_brand_slider_04"/>
</template>
<template id="as_brand_grid_five" name="brand Grid 5">
    <t t-call="theme_alan.base_brand_slider_05"/>
</template>


<template id="s_brand_grid" name="brand Grid">
    <div class="container">
        <div t-attf-class="row g-3 as-snippets-row">
            <t t-foreach="records" t-as="brand">
                <t t-set="col_mob_size" t-value="configuration.get('default_col_mob')"/>
                <t t-if="int(configuration.get('default_col_desk')) == 5">
                    <t t-set="col_size" t-value="'five'"/>
                </t>
                <t t-else="">
                    <t t-set="col_size" t-value="int(12/int(configuration.get('default_col_desk')))"/>
                </t>
                 <t t-if="configuration.get('grid_style') == 'as-grid-1'">
                    <div t-attf-class="col-lg-#{col_size} mob-col-#{col_mob_size}">
                        <t t-call="theme_alan.as_brand_grid_one"/>
                    </div>
                </t>
                <t t-if="configuration.get('grid_style') == 'as-grid-2'">
                    <div t-attf-class="col-lg-#{col_size} mob-col-#{col_mob_size}">
                        <t t-call="theme_alan.as_brand_grid_two"/>
                    </div>
                </t>
                <t t-if="configuration.get('grid_style') == 'as-grid-3'">
                    <div t-attf-class="col-lg-#{col_size} mob-col-#{col_mob_size}">
                        <t t-call="theme_alan.as_brand_grid_three"/>
                    </div>
                </t>
                <t t-if="configuration.get('grid_style') == 'as-grid-4'">
                    <div t-attf-class="col-lg-#{col_size} mob-col-#{col_mob_size}">
                        <t t-call="theme_alan.as_brand_grid_four"/>
                    </div>
                </t>
                <t t-if="configuration.get('grid_style') == 'as-grid-5'">
                    <div t-attf-class="col-lg-#{col_size} mob-col-#{col_mob_size}">
                        <t t-call="theme_alan.as_brand_grid_five"/>
                    </div>
                </t>
            </t>
        </div>
    </div>
</template>

</odoo>