odoo_theme/theme_beauty/theme_common/views/s_images_carousel.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template name="Images Carousel" id="s_images_carousel">
        <section class="pt48 pb48" data-name="Images Carousel">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-4">
                        <h1>Images Carousel</h1>
                        <h5 class="text-primary pb16">Cycling through elements</h5>
                        <p>Use this building block to showcase your content with an images carousel. You can edit, add or remove images using the customize options.</p>
                        <p><i class="fa fa-info-circle fa-1x text-primary"/> - <b>An additional information</b></p>
                    </div>
                    <div id="s_images_carousel" class="col-lg-8 s_images_carousel s_carousel s_carousel_rounded s_col_no_bgcolor carousel slide" data-interval="10000" data-name="Carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#s_images_carousel" data-slide-to="0" class="active"></li>
                            <li data-target="#s_images_carousel" data-slide-to="1"></li>
                            <li data-target="#s_images_carousel" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="img img-fluid" src="/web/image/theme_common.image_content_24" alt=""/>
                                <div class="carousel-caption">
                                    <span>A <b>caption</b> for this image</span>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="img img-fluid" src="/web/image/theme_common.image_content_25" alt=""/>
                                <div class="carousel-caption">
                                    <span>A <b>caption</b> for this image</span>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="img img-fluid" src="/web/image/theme_common.image_content_26" alt=""/>
                                <div class="carousel-caption">
                                    <span>A <b>caption</b> for this image</span>
                                </div>
                            </div>
                        </div>
                        <!-- Controls -->
                        <div class="carousel-control-prev" data-target="#s_images_carousel" data-slide="prev" role="img" aria-label="Previous" title="Previous">
                            <span class="carousel-control-prev-icon"/>
                            <span class="sr-only">Previous</span>
                        </div>
                        <div class="carousel-control-next" data-target="#s_images_carousel" data-slide="next" role="img" aria-label="Next" title="Next">
                            <span class="carousel-control-next-icon"/>
                            <span class="sr-only">Next</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </template>

    <template id="s_images_carousel_options" inherit_id="website.snippet_options">
        <xpath expr="//div[@id='so_main_colorpicker']" position="attributes">
            <attribute name="data-exclude" add=".s_images_carousel .carousel-item" separator=","/>
        </xpath>
        <xpath expr="//div[@data-js='background']" position="attributes">
            <attribute name="data-exclude" add=".s_images_carousel .carousel-item" separator=","/>
        </xpath>
    </template>

</odoo>