Adding carousel

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">