diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index fee5216974a..060c603ab1c 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -398,6 +398,9 @@ class Website(Home):
             t['numOfEl'] = attribs.get('data-number-of-elements')
             t['numOfElSm'] = attribs.get('data-number-of-elements-sm')
             t['numOfElFetch'] = attribs.get('data-number-of-elements-fetch')
+            t['rowPerSlide'] = attribs.get('data-row-per-slide')
+            t['arrowPosition'] = attribs.get('data-arrow-position')
+            t['extraClasses'] = attribs.get('data-extra-classes')
         return templates
 
     @http.route('/website/get_current_currency', type='json', auth="public", website=True)
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet/000.js b/addons/website/static/src/snippets/s_dynamic_snippet/000.js
index 4424ba0c078..3213d9da99a 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet/000.js
+++ b/addons/website/static/src/snippets/s_dynamic_snippet/000.js
@@ -5,6 +5,8 @@ const core = require('web.core');
 const config = require('web.config');
 const publicWidget = require('web.public.widget');
 const {Markup} = require('web.utils');
+const DEFAULT_NUMBER_OF_ELEMENTS = 4;
+const DEFAULT_NUMBER_OF_ELEMENTS_SM = 1;
 
 const DynamicSnippet = publicWidget.Widget.extend({
     selector: '.s_dynamic_snippet',
@@ -134,28 +136,31 @@ const DynamicSnippet = publicWidget.Widget.extend({
      * @private
      */
     _prepareContent: function () {
-        if (this.$target[0].dataset.numberOfElements && this.$target[0].dataset.numberOfElementsSmallDevices) {
-            this.renderedContent = core.qweb.render(
-                this.template_key,
-                this._getQWebRenderOptions());
-        } else {
-            this.renderedContent = '';
-        }
+        this.renderedContent = core.qweb.render(
+            this.template_key,
+            this._getQWebRenderOptions()
+        );
     },
     /**
      * Method to be overridden in child components in order to prepare QWeb
      * options.
      * @private
      */
-    _getQWebRenderOptions: function () {
+     _getQWebRenderOptions: function () {
+        const dataset = this.$target[0].dataset;
+        const numberOfRecords = parseInt(dataset.numberOfRecords);
+        let numberOfElements;
+        if (config.device.isMobile) {
+            numberOfElements = parseInt(dataset.numberOfElementsSmallDevices) || DEFAULT_NUMBER_OF_ELEMENTS_SM;
+        } else {
+            numberOfElements = parseInt(dataset.numberOfElements) || DEFAULT_NUMBER_OF_ELEMENTS;
+        }
+        const chunkSize = numberOfRecords < numberOfElements ? numberOfRecords : numberOfElements;
         return {
-            chunkSize: parseInt(
-                config.device.isMobile
-                    ? this.$target[0].dataset.numberOfElementsSmallDevices
-                    : this.$target[0].dataset.numberOfElements
-            ),
+            chunkSize: chunkSize,
             data: this.data,
-            uniqueId: this.uniqueId
+            uniqueId: this.uniqueId,
+            extraClasses: dataset.extraClasses || '',
         };
     },
     /**
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet/000.xml b/addons/website/static/src/snippets/s_dynamic_snippet/000.xml
index 68153dd3453..2498e6c1a85 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet/000.xml
+++ b/addons/website/static/src/snippets/s_dynamic_snippet/000.xml
@@ -6,7 +6,7 @@
         <t t-set="rowIndexGenerator" t-value="Array.from(Array(Math.ceil(data.length/chunkSize)).keys())"/>
         <t t-set="colIndexGenerator" t-value="Array.from(Array(chunkSize).keys())"/>
         <t t-foreach="rowIndexGenerator" t-as="rowIndex">
-            <div class="row my-4">
+            <div t-attf-class="row my-4 #{extraClasses}">
                 <t t-foreach="colIndexGenerator" t-as="colIndex">
                     <t t-if="(rowIndex * chunkSize + colIndex) &lt; data.length">
                         <div t-attf-class="#{colClass}">
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet/options.js b/addons/website/static/src/snippets/s_dynamic_snippet/options.js
index a0ae018dc21..0540aad9d4e 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet/options.js
+++ b/addons/website/static/src/snippets/s_dynamic_snippet/options.js
@@ -47,18 +47,6 @@ const dynamicSnippetOptions = options.Class.extend({
         if (params.attributeName === 'templateKey' && previewMode === false) {
             this._templateUpdated(widgetValue, params.activeValue);
         }
-        if (params.attributeName === 'numberOfRecords' && previewMode === false) {
-            const dataSet = this.$target.get(0).dataset;
-            const numberOfElements = parseInt(dataSet.numberOfElements);
-            const numberOfRecords = parseInt(dataSet.numberOfRecords);
-            const numberOfElementsSmallDevices = parseInt(dataSet.numberOfElementsSmallDevices);
-            if (numberOfElements > numberOfRecords) {
-                dataSet.numberOfElements = numberOfRecords;
-            }
-            if (numberOfElementsSmallDevices > numberOfRecords) {
-                dataSet.numberOfElementsSmallDevices = numberOfRecords;
-            }
-        }
     },
 
     //--------------------------------------------------------------------------
@@ -79,16 +67,6 @@ const dynamicSnippetOptions = options.Class.extend({
         await this._super(...arguments);
     },
 
-    /**
-     * @override
-     */
-    async updateUIVisibility() {
-        await this._super(...arguments);
-        const template = this._getCurrentTemplate();
-        const groupingMessage = this.el.querySelector('.o_grouping_message');
-        groupingMessage.classList.toggle('d-none', template && !!template.numOfEl && !!template.numOfElSm);
-    },
-
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
@@ -112,16 +90,6 @@ const dynamicSnippetOptions = options.Class.extend({
             return Object.keys(this.dynamicFilters).length !== 1;
         }
 
-        if (widgetName === 'number_of_elements_opt') {
-            const template = this._getCurrentTemplate();
-            return template && !template.numOfEl;
-        }
-
-        if (widgetName === 'number_of_elements_small_devices_opt') {
-            const template = this._getCurrentTemplate();
-            return template && !template.numOfElSm;
-        }
-
         if (widgetName === 'number_of_records_opt') {
             const template = this._getCurrentTemplate();
             return template && !template.numOfElFetch;
@@ -249,8 +217,6 @@ const dynamicSnippetOptions = options.Class.extend({
         // numberOfElements or numberOfElementsSmallDevices) might throw an
         // exception by not finding the attribute on the element.
         this.options.wysiwyg.odooEditor.observerUnactive();
-        this._setOptionValue('numberOfElements', 4);
-        this._setOptionValue('numberOfElementsSmallDevices', 1);
         const filterKeys = this.$el.find("we-select[data-attribute-name='filterId'] we-selection-items we-button");
         if (filterKeys.length > 0) {
             this._setOptionValue('numberOfRecords', this.dynamicFilters[Object.keys(this.dynamicFilters)[0]].limit);
@@ -285,13 +251,22 @@ const dynamicSnippetOptions = options.Class.extend({
         const template = this.dynamicFilterTemplates[newTemplate];
         if (template.numOfEl) {
             this.$target[0].dataset.numberOfElements = template.numOfEl;
+        } else {
+            delete this.$target[0].dataset.numberOfElements;
         }
         if (template.numOfElSm) {
             this.$target[0].dataset.numberOfElementsSmallDevices = template.numOfElSm;
+        } else {
+            delete this.$target[0].dataset.numberOfElementsSmallDevices;
         }
         if (template.numOfElFetch) {
             this.$target[0].dataset.numberOfRecords = template.numOfElFetch;
         }
+        if (template.extraClasses) {
+            this.$target[0].dataset.extraClasses = template.extraClasses;
+        } else {
+            delete this.$target[0].dataset.extraClasses;
+        }
     },
     /**
      * Sets the option value.
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.js b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.js
index adae0ab86bd..0948f4acbaf 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.js
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.js
@@ -3,6 +3,7 @@ odoo.define('website.s_dynamic_snippet_carousel', function (require) {
 
 const publicWidget = require('web.public.widget');
 const DynamicSnippet = require('website.s_dynamic_snippet');
+const config = require('web.config');
 
 const DynamicSnippetCarousel = DynamicSnippet.extend({
     selector: '.s_dynamic_snippet_carousel',
@@ -26,6 +27,8 @@ const DynamicSnippetCarousel = DynamicSnippet.extend({
             this._super.apply(this, arguments),
             {
                 interval: parseInt(this.$target[0].dataset.carouselInterval),
+                rowPerSlide: parseInt(config.device.isMobile ? 1 : this.$target[0].dataset.rowPerSlide || 1),
+                arrowPosition: this.$target[0].dataset.arrowPosition || '',
             },
         );
     },
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
index 16b2c2ba523..2e2756de413 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss
@@ -18,4 +18,9 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
+  .s_dynamic_snippet_arrow_bottom {
+    > .carousel-control-prev, .carousel-control-next {
+      position: relative;
+    }
+  }
 }
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
index 9cafb768cf8..6968ced6539 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/000.xml
@@ -1,36 +1,60 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
+    <t t-name="website.s_dynamic_snippet.carousel.arrows">
+        <a t-attf-href="##{uniqueId}" class="carousel-control-prev" data-bs-slide="prev" role="button" aria-label="Previous" title="Previous">
+            <span class="fa fa-chevron-circle-left fa-2x"/>
+            <span class="visually-hidden">Previous</span>
+        </a>
+        <a t-attf-href="##{uniqueId}" class="carousel-control-next" data-bs-slide="next" role="button" aria-label="Next" title="Next">
+            <span class="fa fa-chevron-circle-right fa-2x"/>
+            <span class="visually-hidden">Next</span>
+        </a>
+    </t>
     <t t-name="website.s_dynamic_snippet.carousel">
         <div t-att-id="uniqueId" class="carousel slide" t-att-data-bs-interval="interval">
             <!-- Content -->
-            <t t-set="colClass" t-value="'d-flex flex-grow-0 flex-shrink-0 col-' + Math.trunc(12 / chunkSize).toString()"/>
-            <t t-set="slideIndexGenerator" t-value="Array.from(Array(Math.ceil(data.length/chunkSize)).keys())"/>
-            <t t-set="itemIndexGenerator" t-value="Array.from(Array(chunkSize).keys())"/>
+            <t t-set="rowSize" t-value="chunkSize" />
+            <t t-set="slideSize" t-value="rowSize * rowPerSlide" />
+            <t t-set="colClass" t-value="'d-flex flex-grow-0 flex-shrink-0 col-' + Math.trunc(12 / rowSize).toString()"/>
+            <t t-set="slideIndexGenerator" t-value="Array.from(Array(Math.ceil(data.length/slideSize)).keys())"/>
+            <t t-set="rowIndexGenerator" t-value="Array.from(Array(rowPerSlide).keys())"/>
+            <t t-set="colIndexGenerator" t-value="Array.from(Array(rowSize).keys())"/>
             <div class="carousel-inner row w-100 mx-auto" role="listbox">
                 <t t-foreach="slideIndexGenerator" t-as="slideIndex">
-                    <div t-attf-class="carousel-item #{slideIndex_first ? 'active' : ''}">
-                        <div class="row">
-                            <t t-foreach="itemIndexGenerator" t-as="itemIndex">
-                                <t t-if="(slideIndex * chunkSize + itemIndex) &lt; data.length">
-                                    <div t-attf-class="#{colClass}">
-                                        <t t-out="data[slideIndex * chunkSize + itemIndex]"/>
-                                    </div>
-                                </t>
+                    <t t-set="slideOffset" t-value="slideIndex * slideSize"/>
+                    <div t-attf-class="carousel-item #{extraClasses} #{slideIndex_first ? 'active' : ''}">
+                        <t t-foreach="rowIndexGenerator" t-as="rowIndex">
+                            <t t-set="rowOffset" t-value="slideOffset + (rowIndex * rowSize)"/>
+                            <t t-if="rowOffset &lt; data.length">
+                                <div class="row">
+                                    <t t-foreach="colIndexGenerator" t-as="colIndex">
+                                        <t t-set="itemIndex" t-value="rowOffset + colIndex"/>
+                                        <t t-if="itemIndex &lt; data.length">
+                                            <div t-attf-class="#{colClass}">
+                                                <t t-out="data[itemIndex]"/>
+                                            </div>
+                                        </t>
+                                    </t>
+                                </div>
                             </t>
-                        </div>
+                        </t>
                     </div>
                 </t>
             </div>
             <!-- Controls -->
             <t t-if='slideIndexGenerator.length > 1'>
-                <a t-attf-href="##{uniqueId}" class="carousel-control-prev" data-bs-slide="prev" role="button" aria-label="Previous" title="Previous">
-                    <span class="fa fa-chevron-circle-left fa-2x"/>
-                    <span class="visually-hidden">Previous</span>
-                </a>
-                <a t-attf-href="##{uniqueId}" class="carousel-control-next" data-bs-slide="next" role="button" aria-label="Next" title="Next">
-                    <span class="fa fa-chevron-circle-right fa-2x"/>
-                    <span class="visually-hidden">Next</span>
-                </a>
+                <t t-if="arrowPosition === 'bottom'">
+                    <div class="s_dynamic_snippet_arrow_bottom pt-2 d-flex justify-content-center">
+                        <t t-call="website.s_dynamic_snippet.carousel.arrows">
+                            <t t-set="uniqueId" t-value="uniqueId" />
+                        </t>
+                    </div>
+                </t>
+                <t t-else="">
+                    <t t-call="website.s_dynamic_snippet.carousel.arrows">
+                        <t t-set="uniqueId" t-value="uniqueId" />
+                    </t>
+                </t>
             </t>
         </div>
     </t>
diff --git a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/options.js b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/options.js
index cb9a3cf566a..23cd8cf8c63 100644
--- a/addons/website/static/src/snippets/s_dynamic_snippet_carousel/options.js
+++ b/addons/website/static/src/snippets/s_dynamic_snippet_carousel/options.js
@@ -18,7 +18,28 @@ const dynamicSnippetCarouselOptions = s_dynamic_snippet_options.extend({
     _setOptionsDefaultValues: function () {
         this._super.apply(this, arguments);
         this._setOptionValue('carouselInterval', '5000');
-    }
+    },
+    /**
+     * Take the new template selection into account
+     *
+     * @param {number} newTemplate id of the newly selected template
+     * @param {number} oldTemplate id of the previously selected template
+     * @override
+     */
+    _templateUpdated(newTemplate, oldTemplate) {
+        this._super(...arguments);
+        const template = this.dynamicFilterTemplates[newTemplate];
+        if (template.rowPerSlide) {
+            this.$target[0].dataset.rowPerSlide = template.rowPerSlide;
+        } else {
+            delete this.$target[0].dataset.rowPerSlide;
+        }
+        if (template.arrowPosition) {
+            this.$target[0].dataset.arrowPosition = template.arrowPosition;
+        } else {
+            delete this.$target[0].dataset.arrowPosition;
+        }
+    },
 
 });
 
diff --git a/addons/website/views/snippets/s_dynamic_snippet.xml b/addons/website/views/snippets/s_dynamic_snippet.xml
index 15f48dc9f06..7e0e8927bbc 100644
--- a/addons/website/views/snippets/s_dynamic_snippet.xml
+++ b/addons/website/views/snippets/s_dynamic_snippet.xml
@@ -26,19 +26,6 @@
             <we-select string="Fetched elements" data-name="number_of_records_opt" data-attribute-name="numberOfRecords" data-no-preview="true">
                 <we-button t-foreach="range(1, 17)" t-as="value" t-att-data-select-data-attribute="value" t-esc="value"/>
             </we-select>
-            <we-title class="mt-2 o_grouping_message"><t t-esc="grouping_message"/></we-title>
-            <we-select string="Desktop" class="o_we_sublevel_1" data-name="number_of_elements_opt" data-attribute-name="numberOfElements" data-no-preview="true">
-                <we-button data-select-data-attribute="1">1</we-button>
-                <we-button data-select-data-attribute="2">2</we-button>
-                <we-button data-select-data-attribute="3">3</we-button>
-                <we-button data-select-data-attribute="4">4</we-button>
-                <we-button data-select-data-attribute="6">6</we-button>
-            </we-select>
-            <we-select string="Mobile" class="o_we_sublevel_1" data-name="number_of_elements_small_devices_opt" data-attribute-name="numberOfElementsSmallDevices" data-no-preview="true">
-                <we-button data-select-data-attribute="1">1</we-button>
-                <we-button data-select-data-attribute="2">2</we-button>
-                <we-button data-select-data-attribute="3">3</we-button>
-            </we-select>
             <t t-out="0"/>
         </div>
     </template>
@@ -47,7 +34,6 @@
             <t t-call="website.s_dynamic_snippet_options_template">
                 <t t-set="snippet_name" t-value="'dynamic_snippet'"/>
                 <t t-set="snippet_selector" t-value="'.s_dynamic_snippet'"/>
-                <t t-set="grouping_message">Items per row</t>
             </t>
         </xpath>
     </template>
diff --git a/addons/website/views/snippets/s_dynamic_snippet_carousel.xml b/addons/website/views/snippets/s_dynamic_snippet_carousel.xml
index b7042e3cebe..289d807a1f8 100644
--- a/addons/website/views/snippets/s_dynamic_snippet_carousel.xml
+++ b/addons/website/views/snippets/s_dynamic_snippet_carousel.xml
@@ -9,7 +9,6 @@
         <t t-call="website.s_dynamic_snippet_options_template">
             <t t-set="snippet_name" t-value="snippet_name"/>
             <t t-set="snippet_selector" t-value="snippet_selector"/>
-            <t t-set="grouping_message">Items per slide</t>
             <we-input string="Slider Speed"
                   data-select-data-attribute="1s" data-name="speed_opt" data-attribute-name="carouselInterval" data-no-preview="true"
                   data-unit="s" data-save-unit="ms" data-step="0.1"/>
diff --git a/addons/website_blog/static/src/snippets/s_blog_posts/options.js b/addons/website_blog/static/src/snippets/s_blog_posts/options.js
index 00c82c8fd79..41e5c5c9e95 100644
--- a/addons/website_blog/static/src/snippets/s_blog_posts/options.js
+++ b/addons/website_blog/static/src/snippets/s_blog_posts/options.js
@@ -78,7 +78,6 @@ const dynamicSnippetBlogPostsOptions = dynamicSnippetOptions.extend({
      * @private
      */
     _setOptionsDefaultValues: function () {
-        this._setOptionValue('numberOfElements', 3);
         this._setOptionValue('filterByBlogId', -1);
         this._super.apply(this, arguments);
     },
diff --git a/addons/website_blog/views/snippets/s_blog_posts.xml b/addons/website_blog/views/snippets/s_blog_posts.xml
index d3c58e7e742..d6364c9d926 100644
--- a/addons/website_blog/views/snippets/s_blog_posts.xml
+++ b/addons/website_blog/views/snippets/s_blog_posts.xml
@@ -11,7 +11,7 @@
 <!-- Load-time templates (rendered in JS on page load) -->
 <!-- List layout -->
 <template id="dynamic_filter_template_blog_post_list" name="List layout">
-    <div t-foreach="records" t-as="data" class="d-flex mt-3 s_blog_posts_post">
+    <div t-foreach="records" t-as="data" class="d-flex mt-3 s_blog_posts_post" data-number-of-elements="2">
         <t t-set="record" t-value="data['_record']"/>
         <a class="s_blog_posts_post_cover flex-grow-0 flex-shrink-0 align-self-baseline position-relative" t-att-href="data['call_to_action_url']" t-att-title="'Read' + data['name']">
             <t t-call="website.record_cover">
@@ -34,7 +34,7 @@
 </template>
 <!-- Big picture layout -->
 <template id="dynamic_filter_template_blog_post_big_picture" name="Big picture layout">
-    <figure t-foreach="records" t-as="data" class="my-3 w-100 s_blog_posts_post">
+    <figure t-foreach="records" t-as="data" class="my-3 w-100 s_blog_posts_post" data-number-of-elements="3">
         <t t-set="record" t-value="data['_record']"/>
         <a class="s_blog_posts_post_cover position-relative d-flex flex-column shadow-sm overflow-hidden rounded text-decoration-none" t-att-href="data['call_to_action_url']">
             <t t-call="website.record_cover">
@@ -55,7 +55,7 @@
 </template>
 <!-- Horizontal layout -->
 <template id="dynamic_filter_template_blog_post_horizontal" name="Horizontal layout">
-    <figure t-foreach="records" t-as="data" class="post s_blog_posts_post w-100">
+    <figure t-foreach="records" t-as="data" class="post s_blog_posts_post w-100" data-number-of-elements="3">
         <t t-set="record" t-value="data['_record']"/>
         <span t-if="is_sample" class="h5 float-end bg-primary text-uppercase rounded-circle px-2 py-2">Sample</span>
         <figcaption>
@@ -76,7 +76,7 @@
 </template>
 <!-- Card layout -->
 <template id="dynamic_filter_template_blog_post_card" name="Card layout">
-    <div t-foreach="records" t-as="data" class="s_blog_posts_post pb32 w-100">
+    <div t-foreach="records" t-as="data" class="s_blog_posts_post pb32 w-100" data-number-of-elements="3">
         <t t-set="record" t-value="data['_record']"/>
         <div class="card">
             <a class="s_blog_posts_post_cover" t-att-href="data['call_to_action_url']">
diff --git a/addons/website_event/views/snippets/s_events.xml b/addons/website_event/views/snippets/s_events.xml
index 809516b74a6..f81151a3e69 100644
--- a/addons/website_event/views/snippets/s_events.xml
+++ b/addons/website_event/views/snippets/s_events.xml
@@ -74,7 +74,6 @@
         <t t-call="website_event.s_dynamic_snippet_options_template">
             <t t-set="snippet_name" t-value="'event_upcoming_snippet'"/>
             <t t-set="snippet_selector" t-value="'.s_event_upcoming_snippet'"/>
-            <t t-set="grouping_message">Items per row</t>
         </t>
     </xpath>
 </template>