diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 8a03e1aeee6..e23269ba24e 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -543,3 +543,63 @@ div.media_iframe_video .css_editable_mode_display {
     transform: none !important;
   }
 }
+/* Fix: backward compatibility saas-3 */
+div.carousel .container > .carousel-caption {
+  position: absolute;
+  right: 50%;
+  left: 50%;
+  bottom: 20px;
+}
+div.carousel .container > .carousel-caption > div {
+  position: absolute;
+  text-align: left;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.4);
+  bottom: 20px;
+}
+div.carousel .container > .carousel-image {
+  top: 5%;
+  bottom: 5%;
+  position: absolute;
+  max-height: 90%;
+  margin: 0 auto;
+}
+div.carousel .item.text_image .container > .carousel-caption {
+  left: 10%;
+}
+div.carousel .item.text_image .container > .carousel-caption > div {
+  right: 50%;
+  margin-right: -20%;
+  max-width: 550px;
+}
+div.carousel .item.text_image .container > .carousel-image {
+  right: 10%;
+  left: 50%;
+}
+div.carousel .item.image_text .container > .carousel-caption {
+  right: 10%;
+}
+div.carousel .item.image_text .container > .carousel-caption > div {
+  left: 50%;
+  margin-left: -20%;
+  max-width: 550px;
+}
+div.carousel .item.image_text .container > .carousel-image {
+  right: 50%;
+  left: 10%;
+}
+div.carousel .item.text_only .container > .carousel-caption {
+  left: 10%;
+  right: 10%;
+  top: 10%;
+  bottom: auto;
+}
+div.carousel .item.text_only .container > .carousel-caption > div {
+  text-align: center;
+  background: transparent;
+  bottom: auto;
+  width: 100%;
+}
+div.carousel .item.text_only .container > .carousel-image {
+  display: none !important;
+}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 21e184d5a91..7a12771bd4c 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -442,3 +442,62 @@ div.media_iframe_video
         -ms-transform: none !important
         -o-transform: none !important
         transform: none !important
+
+
+/* Fix: backward compatibility saas-3 */
+
+div.carousel
+    .container
+        > .carousel-caption
+            position: absolute
+            right: 50%
+            left: 50%
+            bottom: 20px
+            > div
+                position: absolute
+                text-align: left
+                padding: 20px
+                background: rgba(0, 0, 0, 0.4)
+                bottom: 20px
+        > .carousel-image
+            top: 5%
+            bottom: 5%
+            position: absolute
+            max-height: 90%
+            margin: 0 auto
+    .item.text_image
+        .container
+            > .carousel-caption
+                left: 10%
+                > div
+                    right: 50%
+                    margin-right: -20%
+                    max-width: 550px
+            > .carousel-image
+                right: 10%
+                left: 50%
+    .item.image_text
+        .container
+            > .carousel-caption
+                right: 10%
+                > div
+                    left: 50%
+                    margin-left: -20%
+                    max-width: 550px
+            > .carousel-image
+                right: 50%
+                left: 10%
+    .item.text_only
+        .container
+            > .carousel-caption
+                left: 10%
+                right: 10%
+                top: 10%
+                bottom: auto
+                > div
+                    text-align: center
+                    background: transparent
+                    bottom: auto
+                    width: 100%
+            > .carousel-image
+                display: none !important
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index b6e3919b9d4..dc1c78251a2 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -1003,7 +1003,19 @@
             this.$target.find('.carousel-control, .carousel-indicators').removeClass("hidden");
             this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
 
-            var $clone = this.$target.find(".item.active").clone();
+            // clone the best candidate from template to use new features
+            var $snippets = this.BuildingBlock.$snippets.find('.oe_snippet_body.carousel');
+            var point = 0;
+            var selection;
+            var className = _.compact(this.$target.attr("class").split(" "));
+            $snippets.each(function () {
+                var len = _.intersection(_.compact(this.className.split(" ")), className).length;
+                if (len > point) {
+                    point = len;
+                    selection = this;
+                }
+            });
+            var $clone = $(selection).find('.item:first').clone();
 
             // insert
             $clone.removeClass('active').insertAfter($active);
@@ -1115,10 +1127,10 @@
             var self = this;
             this.$target.find('.carousel-control').off('click').on('click', function () {
                 self.$target.carousel( $(this).data('slide')); });
-
-            this.$target.find('.carousel-image, .carousel-inner .content > div').attr('contentEditable', 'true');
-            this.$target.find('.carousel-image').attr('attributeEditable', 'true');
             this._super();
+
+            /* Fix: backward compatibility saas-3 */
+            this.$target.find('.item.text_image .container').find('> .carousel-caption > div, > img.carousel-image').attr('contentEditable', 'true');
         },
     });
 
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index b283c116534..01e7749b98d 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -24,7 +24,7 @@
                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
             </ol>
             <div class="carousel-inner">
-                <div class="item image_text active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
+                <div class="item active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
                     <div class="container">
                         <div class="row content">
                             <div class="carousel-content col-md-6 col-sm-12">
@@ -35,7 +35,7 @@
                                     </p>
                             </div>
                             <span class="carousel-img col-md-6 hidden-sm hidden-xs">
-                                <img class="carousel-image img-responsive" src="/website/static/src/img/banner/banner_picture.png" alt="Banner Odoo Image"/>
+                                <img class="img-responsive" src="/website/static/src/img/banner/banner_picture.png" alt="Banner Odoo Image"/>
                             </span> 
                         </div>
                     </div>
diff --git a/addons/website_event/data/event_demo.xml b/addons/website_event/data/event_demo.xml
index f84e3dbe133..70783859a65 100644
--- a/addons/website_event/data/event_demo.xml
+++ b/addons/website_event/data/event_demo.xml
@@ -18,7 +18,7 @@
 
 <h4>to learn .JS development</h4>
 </div>
-<img class="carousel-image hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
+<img class="hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
 </div>
 </div>
 </div>
@@ -180,7 +180,7 @@
 
 <h4>to learn .JS development</h4>
 </div>
-<img class="carousel-image hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
+<img class="hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
 </div>
 </div>
 </div>
@@ -355,7 +355,7 @@
 <h4>to learn .JS development</h4>
 </div>
 
-<img class="carousel-image hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
+<img class="hidden-xs" alt="Banner Odoo Image" src="/website/static/src/img/banner/banner_picture.png">
 </div>
 </div>
 </div>