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

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

<template id="base_blog_slider_01">
    <div class="as-blog-card-01">
        <div class="as-blog-card-media">
            <div class="as-blog-card-media-cover" t-attf-style="background-image:{{blog.cover_background}}"></div>
            <div class="as-blog-card-meta">
                <div class="b-date"><i class="fa fa-calendar"></i>
                    <span>
                        <time t-field="blog.write_date" t-options='{"format": "MMM d, yyyy"}' />
                    </span>
                </div>
                <div class="b-cat"><i class="fa fa-folder-open"></i>
                    <a t-attf-href="/blog/#{slug(blog.blog_id)}" t-field="blog.blog_id"/>
                </div>
            </div>
        </div>
        <div class="as-blog-card-body">
             <div t-if="len(blog.tag_ids)" class="b-tags">
                <t t-foreach="blog.tag_ids" t-as="one_tag">
                    <a t-attf-href="/blog/tag/#{slug(one_tag.sudo())}"
                        t-esc="one_tag.name"/>
                </t>
            </div>
            <h3><a t-attf-href="/blog/#{slug(blog.blog_id)}/#{slug(blog)}"><t t-esc="blog.name"/></a></h3>
            <p t-esc="blog.subtitle"></p>
        </div>
    </div>
</template>

<template id="base_blog_slider_02">
    <div class="as-blog-card-02">
        <div class="as-blog-card-media">
            <div class="as-blog-card-media-cover" t-attf-style="background-image:{{blog.cover_background}}"></div>
            <div class="b-date">
                <i class="fa fa-calendar"></i>
                <span>
                    <time t-field="blog.write_date" t-options='{"format": "MMM d, yyyy"}' />
                </span>
            </div>
        </div>
        <div class="as-blog-card-body">
            <h3><a t-attf-href="/blog/#{slug(blog.blog_id)}/#{slug(blog)}"><t t-esc="blog.name"/></a></h3>
            <p t-esc="blog.subtitle"></p>
        </div>
        <div class="as-blog-card-meta">
            <a class="b-read-more" t-attf-href="/blog/#{slug(blog.blog_id)}/#{slug(blog)}">Read More <i class="asi asi-arrow-right"></i></a>
            <div class="b-cat">
                <a t-attf-href="/blog/#{slug(blog.blog_id)}" t-field="blog.blog_id"/>
            </div>
        </div>
    </div>
</template>

<template id="base_blog_slider_03">
    <div class="as-blog-card-03">
        <div class="as-blog-card-media">
            <div class="as-blog-card-media-cover" t-attf-style="background-image:{{blog.cover_background}}"></div>
            <div class="b-date"><i class="fa fa-calendar"></i>
                <span>
                    <time t-field="blog.write_date" t-options='{"format": "MMM d, yyyy"}' />
                </span>
            </div>
        </div>
        <div class="as-blog-card-body">
             <div t-if="len(blog.tag_ids)" class="b-tags">
                <t t-foreach="blog.tag_ids" t-as="one_tag">
                    <a t-attf-href="/blog/tag/#{slug(one_tag.sudo())}"
                        t-esc="one_tag.name"/>
                </t>
            </div>
            <h3><a t-attf-href="/blog/#{slug(blog.blog_id)}/#{slug(blog)}"><t t-esc="blog.name"/></a></h3>
            <p t-esc="blog.subtitle"></p>
        </div>
    </div>
</template>

<template id="base_blog_slider_04">
    <div class="as-blog-card-04">
        <div class="as-blog-card-media">
            <div class="as-blog-card-media-cover" t-attf-style="background-image:{{blog.cover_background}}"></div>
            <div class="as-blog-card-body">
                <div class="b-date"><i class="fa fa-calendar"></i>
                    <span>
                        <time t-field="blog.write_date" t-options='{"format": "MMM d, yyyy"}' />
                    </span>
                </div>
                <h3><a t-attf-href="/blog/#{slug(blog.blog_id)}/#{slug(blog)}"><t t-esc="blog.name"/></a></h3>
            </div>
        </div>
    </div>
</template>

<template id="base_blog_slider_05">
    <div class="as-blog-card-05">
        <div class="as-blog-card-media">
            <div class="as-blog-card-media-cover" t-attf-style="background-image:{{blog.cover_background}}"></div>
        </div>
        <div class="as-blog-card-body">
            <h3><a t-attf-href="/blog/#{slug(blog.blog_id)}/#{slug(blog)}"><t t-esc="blog.name"/></a></h3>
            <div class="as-blog-card-meta">
                <div class="b-cat">
                    <a t-attf-href="/blog/#{slug(blog.blog_id)}" t-field="blog.blog_id"/>
                </div>
                <div class="b-date">
                    <time t-field="blog.write_date" t-options='{"format": "MMM d, yyyy"}' />
                </div>
            </div>
            <p t-esc="blog.subtitle"></p>
        </div>
    </div>
</template>

<template id="as_blog_slider_one" name="Blog Slider 1">
    <t t-call="theme_alan.base_blog_slider_01"/>
</template>
<template id="as_blog_slider_two" name="Blog Slider 2">
    <t t-call="theme_alan.base_blog_slider_02"/>
</template>
<template id="as_blog_slider_three" name="Blog Slider 3">
    <t t-call="theme_alan.base_blog_slider_03"/>
</template>
<template id="as_blog_slider_four" name="Blog Slider 4">
    <t t-call="theme_alan.base_blog_slider_04"/>
</template>
<template id="as_blog_slider_five" name="Blog Slider 5">
    <t t-call="theme_alan.base_blog_slider_05"/>
</template>

<template id="s_blog_slider" name="Blog 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="blog">
                <div t-attf-class="swiper-slide" >
                    <t t-if="configuration.get('slider_style') == 'as-slider-1'">
                        <t t-call="theme_alan.as_blog_slider_one"/>
                    </t>
                    <t t-if="configuration.get('slider_style') == 'as-slider-2'">
                        <t t-call="theme_alan.as_blog_slider_two"/>
                    </t>
                    <t t-if="configuration.get('slider_style') == 'as-slider-3'">
                        <t t-call="theme_alan.as_blog_slider_three"/>
                    </t>
                    <t t-if="configuration.get('slider_style') == 'as-slider-4'">
                        <t t-call="theme_alan.as_blog_slider_four"/>
                    </t>
                    <t t-if="configuration.get('slider_style') == 'as-slider-5'">
                        <t t-call="theme_alan.as_blog_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="as_blog_grid_one" name="blog Grid 1">
    <t t-call="theme_alan.base_blog_slider_01"/>
</template>
<template id="as_blog_grid_two" name="blog Grid 2">
    <t t-call="theme_alan.base_blog_slider_02"/>
</template>
<template id="as_blog_grid_three" name="blog Grid 3">
    <t t-call="theme_alan.base_blog_slider_03"/>
</template>
<template id="as_blog_grid_four" name="blog Grid 4">
    <t t-call="theme_alan.base_blog_slider_04"/>
</template>
<template id="as_blog_grid_five" name="blog Grid 5">
    <t t-call="theme_alan.base_blog_slider_05"/>
</template>


<template id="s_blog_grid" name="blog Grid">
    <div class="container">
        <div t-attf-class="row g-3 as-snippets-row">
            <t t-foreach="records" t-as="blog">
                <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_blog_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_blog_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_blog_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_blog_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_blog_grid_five"/>
                    </div>
                </t>
            </t>
        </div>
    </div>
</template>

</odoo>