[IMP] website: add dots indicators in gallery snippet options

Add dots indicators in gallery snippet options.

Part of https://github.com/odoo/odoo/pull/45096
task-2162952

2 files changed, 23 insertions, 0 deletions

diff --git a/addons/website/static/src/snippets/s_image_gallery/000.js b/addons/website/static/src/snippets/s_image_gallery/000.js
index 7d1ee4ea386..94e31288442 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.js
+++ b/addons/website/static/src/snippets/s_image_gallery/000.js
@@ -100,11 +100,13 @@ const GallerySliderWidget = publicWidget.Widget.extend({
             if (page <= 0) {
                 self.$prev.detach();
             } else {
+                self.$prev.removeClass('d-none');
                 self.$prev.prependTo(self.$indicator);
             }
             if (page >= nbPages - 1) {
                 self.$next.detach();
             } else {
+                self.$next.removeClass('d-none');
                 self.$next.appendTo(self.$indicator);
             }
         }
diff --git a/addons/website/static/src/snippets/s_image_gallery/001.scss b/addons/website/static/src/snippets/s_image_gallery/001.scss
index ef28b5c6d0a..9dfb81902db 100644
--- a/addons/website/static/src/snippets/s_image_gallery/001.scss
+++ b/addons/website/static/src/snippets/s_image_gallery/001.scss
@@ -185,6 +185,27 @@
                 }
             }
         }
+        &.s_image_gallery_indicators_dots {
+            .carousel {
+                ul.carousel-indicators {
+                    height: 40px;
+                    margin: auto;
+
+                    li {
+                        max-width: 8px;
+                        max-height: 8px;
+                        margin: 0 6px;
+                        border-radius: 10px;
+                        background-color: $black;
+                        background-image: none !important;
+
+                        &:not(.active) {
+                            opacity: .4;
+                        }
+                    }
+                }
+            }
+        }
 
         @extend %image-gallery-slideshow-styles;
     }