Adding carousel

templates/base.html

@@ -41,13 +41,15 @@
         const content = document.querySelector('.content');
         const headermove = document.getElementById('header');
         const body = document.body;
+        const footermove = document.getElementById('footer');
 
         sideToggle.addEventListener('click', function() {
             sideMenu.classList.toggle('active');
             this.classList.toggle('menu-opened');
             content.classList.toggle('content-open');
             headermove.classList.toggle('header-move');
-            body.classList.toggle('block-scroll')
+            body.classList.toggle('block-scroll');
+            footermove.classList.toggle('header-move');
             });
         
         sideCloseButtons.forEach(button => {
@@ -57,6 +59,7 @@
                 content.classList.remove('content-open');
                 headermove.classList.remove('header-move');
                 body.classList.remove('block-scroll');
+                footermove.classList.remove('header-move');
                 });
             });
         })
@@ -76,7 +79,7 @@
         } 
  
          prevScrollPos = currentScrollPos; 
-        }; 
+        };                 
     </script>
         
 </body>

templates/footer.html

@@ -1,6 +1,5 @@
 {%load static%}
-<footer class="saburly-main-bg">
-
+<footer id="footer" class="saburly-main-bg">
         <div class="text-center py-4 lg:px-4 connect">
             <a class="no-underline text-white" href="/contact">
                 <div class="p-2 items-center text-white leading-none flex lg:inline-flex" role="alert">

templates/services/services_page.html

@@ -69,7 +69,7 @@
   </div>
 </section>
 
-<section class="relative bg-gray-100">
+<section class="relative bg-gray-100 shadow-3xl border border-gray-300">
   <div class="container mx-auto p-4">
     <div class="text-center mb-8">
     </div>
@@ -88,6 +88,22 @@
 
     </div>
   </div>
+  <div class="container mx-auto px-4 py-6">
+    <div class="relative">
+      <div class="carousel-slider">
+        <div class="carousel-list">
+          {% for item in page.carousel_services.all %}
+            {% if item.carousel_image %}
+              <div class="carousel-item" style="--position:{{forloop.counter}}">
+                <img src="{{ item.carousel_image.file.url }}" alt="{{ item.carousel_name }}" class="w-full h-auto object-cover">
+                <p class="text-center">{{ item.carousel_name }}</p>
+              </div>
+            {% endif %}
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
 </section>
 
 <section class="relative bg-white">
@@ -110,8 +126,7 @@
     </div>
   </div>
 </section>
-
-
+<section>
     <div class="container mx-auto shadow-xl border border-gray-300">
       <div class="grid grid-cols-1 sm:grid-cols-2">