editing banner

core/templates/core/index.html

@@ -2,11 +2,12 @@
 {% load i18n static %}
 
 {% block content %}
+{% get_current_language as CURRENT_LANG %}
 
 {% if banners %}
 <!-- Carousel Section -->
 <section class="banner-carousel mb-4 mt-n1">
-    <div id="mainBannerCarousel" class="carousel slide" data-bs-ride="carousel">
+    <div id="mainBannerCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="{% if CURRENT_LANG == 'ar' %}12000{% else %}8000{% endif %}" data-bs-pause="hover">
         <div class="carousel-indicators">
             {% for banner in banners %}
             <button type="button" data-bs-target="#mainBannerCarousel" data-bs-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active" aria-current="true"{% endif %} aria-label="Slide {{ forloop.counter }}"></button>
@@ -14,7 +15,7 @@
         </div>
         <div class="carousel-inner">
             {% for banner in banners %}
-            <div class="carousel-item {% if forloop.first %}active{% endif %}" data-bs-interval="5000">
+            <div class="carousel-item {% if forloop.first %}active{% endif %}">
                 <div class="banner-wrapper position-relative" style="height: 450px; overflow: hidden;">
                     <img src="{{ banner.image.url }}" class="d-block w-100 h-100" style="object-fit: cover;" alt="{{ banner.display_title }}">
                     <div class="carousel-caption d-none d-md-block text-start start-0 bottom-0 mb-5 ms-5 p-4 rounded" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); max-width: 600px;">
@@ -48,6 +49,22 @@
         {% endif %}
     </div>
 </section>
+
+<script>
+    // Explicitly re-initialize to ensure custom interval is respected
+    document.addEventListener('DOMContentLoaded', function() {
+        var myCarousel = document.querySelector('#mainBannerCarousel');
+        if (myCarousel) {
+            var interval = {% if CURRENT_LANG == 'ar' %}12000{% else %}8000{% endif %};
+            var carousel = new bootstrap.Carousel(myCarousel, {
+                interval: interval,
+                ride: 'carousel',
+                pause: 'hover'
+            });
+            console.log("Carousel initialized with interval:", interval);
+        }
+    });
+</script>
 {% endif %}
 
 <!-- Hero Section (Only show if no banners) -->

static/css/custom.css

@@ -129,3 +129,7 @@ footer {
     margin-right: auto !important;
     margin-left: 0 !important;
 }
+/* Carousel transition speed */
+.carousel-item {
+    transition: transform 1.5s ease-in-out !important;
+}

staticfiles/css/custom.css

@@ -129,3 +129,7 @@ footer {
     margin-right: auto !important;
     margin-left: 0 !important;
 }
+/* Carousel transition speed */
+.carousel-item {
+    transition: transform 1.5s ease-in-out !important;
+}