Trying to add blur and lazy to slides

imports/ui/pages/Index/Index-custom.scss

@@ -211,7 +211,7 @@
   background-image: url('/images/home-slide-snd-2.jpg')
 }
 
-.webp .carousel-item-1 {
+.webp .carousel-item-1.lazy {
   background-image: url('/images/home-slide1.webp')
 }
 
@@ -227,10 +227,30 @@
   background-image: url('/images/home-slide4.webp')
 }
 
+.webp .carousel-item-1 {
+  background-image: url('/images/home-slide1-blur.webp')
+}
+
+.webp .carousel-item-2 {
+  background-image: url('/images/home-slide2-blur.webp')
+}
+
+.webp .carousel-item-3 {
+  background-image: url('/images/home-slide3-blur.webp')
+}
+
+.webp .carousel-item-4 {
+  background-image: url('/images/home-slide4-blur.webp')
+}
+
 .webp .carousel-snd-item-1 {
   background-image: url('/images/home-slide-snd-1.webp')
 }
 
+.webp .carousel-snd-item-2 {
+  background-image: url('/images/home-slide-snd-2-blur.webp')
+}
+
 .webp .carousel-snd-item-2.lazy {
   background-image: url('/images/home-slide-snd-2.webp')
 }

imports/ui/pages/Index/Index.js

@@ -41,8 +41,10 @@ class Index extends Component {
     const car2 = $('#carouselSndIndicators');
     car1.carousel();
     car2.carousel();
+    _.defer(() => {
+      $('#firsthomeslide').addClass('lazy');
+    });
     const loadLazy = (ev) => {
-      // console.log('Slide');
       ev.relatedTarget.classList.add('lazy');
     };
     car1.on('slide.bs.carousel', loadLazy);
@@ -114,7 +116,7 @@ class Index extends Component {
                 </ol>
                 <div className="carousel-inner" role="listbox">
 
-                  <div className="carousel-item carousel-item-1 active">
+                  <div id="firsthomeslide" className="carousel-item carousel-item-1 active">
                     <div
                         tabIndex={0}
                         role="button"