Changing Carousel

static/css/style.css

@@ -198,9 +198,7 @@ body.side-menu.active {
 .content-open:before {
   position: absolute;
   top: 0;
-  right: 0;
+  bottom: 0;
-  left: 0;
-  bottom: -2000000000px;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 99;
@@ -223,38 +221,27 @@ body.side-menu.active {
   overflow: hidden;
 }
 
-.carousel-slider{
+.carousel-slider {
   width: 100%;
-  height: 130px;
   overflow: hidden;
 }
-.carousel-slider .carousel-list{
+
+.carousel-list {
   display: flex;
+  flex-wrap: nowrap;
+  transition: transform 0.5s ease-in-out;
   width: 100%;
-  min-width: calc(100px * 16);
-  position: relative;
 }
-.carousel-slider .carousel-list .carousel-item{
-  width: 100px;
-  height: 100px;
-  position: absolute;
-  left: 100%;
-  animation: autoRun 16s linear infinite;
-  animation-delay: calc((16s / 16) * (var(--position) - 1));
-}
- .carousel-slider .carousel-list .carousel-item img{
-  width: 100%;
- }
 
- @keyframes autoRun {
+.carousel-item {
-  from{
+  width: calc(100% / 6);
-    left: 100%;
+  flex: 0 0 calc(100% / 6); 
-  }to{
+  text-align: center;
-    left: calc(100px * -1);
+}
+
+@media only screen and (max-width: 768px) {
+  .carousel-item {
+    width: calc(100% / 3); 
+    flex: 0 0 calc(100% / 3);
   }
- }
+}
-
- .carousel-slider:hover .carousel-item{
-  animation-play-state: paused!important;
- }
-

static/js/carousel.js

@@ -0,0 +1,11 @@
+function moveCarousel() {
+    const carouselSlider = document.querySelector('.carousel-slider');
+    const carouselList = document.querySelector('.carousel-list');
+    const carouselItems = document.querySelectorAll('.carousel-item');
+    
+    const firstItem = carouselItems[0];
+    carouselList.removeChild(firstItem);
+    carouselList.appendChild(firstItem);
+}
+
+setInterval(moveCarousel, 3000);

static/js/index.js

@@ -0,0 +1,49 @@
+       document.addEventListener('DOMContentLoaded', function() {
+        const sideToggle = document.querySelector('.side-toggle');
+        const sideMenu = document.querySelector('.side-menu');
+        const sideCloseButtons = document.querySelectorAll('.side-close');
+        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');
+            footermove.classList.toggle('header-move');
+            });
+        
+        sideCloseButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                sideMenu.classList.remove('active');
+                sideToggle.classList.remove('menu-opened');
+                content.classList.remove('content-open');
+                headermove.classList.remove('header-move');
+                body.classList.remove('block-scroll');
+                footermove.classList.remove('header-move');
+                });
+            });
+        })
+
+
+        var prevScrollPos = window.pageYOffset; 
+
+        window.onscroll = function() { 
+        var currentScrollPos = window.pageYOffset;
+        const getHeaderHeight = document.getElementById('header')
+        const headerPosition = header.offsetTop + header.offsetHeight;
+ 
+        if (prevScrollPos < currentScrollPos && currentScrollPos > headerPosition ) { 
+            document.getElementById("header").classList.add("header-hidden"); 
+            document.getElementById("header").classList.remove("header-visible"); 
+        }  
+        else { 
+            document.getElementById("header").classList.add("header-visible"); 
+            document.getElementById("header").classList.remove("header-hidden"); 
+        } 
+ 
+         prevScrollPos = currentScrollPos; 
+        };                 

templates/base.html

@@ -6,15 +6,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>{% block title %}Saburly - {{ self.title }}{% endblock %}</title>
 
-    <link
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>
-        rel="stylesheet"
-        href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
-        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
-        crossorigin="anonymous"
-    />
-
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-
     {% load static %}
         <link rel="stylesheet" href="{% static './css/style.css' %}">
         <link rel="shortcut icon" type="image/png" href="{% static './images/favicon32.png' %}">
@@ -31,58 +24,7 @@
         </div>
         {% include 'footer.html' %}
     </main>
-
+    <script src="{%static './js/index.js'%}"></script>
-    <script>
+    <script src="{%static './js/carousel.js'%}"></script>
-        //side menu
-        document.addEventListener('DOMContentLoaded', function() {
-        const sideToggle = document.querySelector('.side-toggle');
-        const sideMenu = document.querySelector('.side-menu');
-        const sideCloseButtons = document.querySelectorAll('.side-close');
-        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');
-            footermove.classList.toggle('header-move');
-            });
-        
-        sideCloseButtons.forEach(button => {
-            button.addEventListener('click', function() {
-                sideMenu.classList.remove('active');
-                sideToggle.classList.remove('menu-opened');
-                content.classList.remove('content-open');
-                headermove.classList.remove('header-move');
-                body.classList.remove('block-scroll');
-                footermove.classList.remove('header-move');
-                });
-            });
-        })
-        //header
-        var prevScrollPos = window.pageYOffset; 
-
-        window.onscroll = function() { 
-        var currentScrollPos = window.pageYOffset;
-        const getHeaderHeight = document.getElementById('header')
-        const headerPosition = header.offsetTop + header.offsetHeight;
- 
-        if (prevScrollPos < currentScrollPos && currentScrollPos > headerPosition ) { 
-            document.getElementById("header").classList.add("header-hidden"); 
-            document.getElementById("header").classList.remove("header-visible"); 
-        }  
-        else { 
-            document.getElementById("header").classList.add("header-visible"); 
-            document.getElementById("header").classList.remove("header-hidden"); 
-        } 
- 
-         prevScrollPos = currentScrollPos; 
-        };                 
-    </script>
-        
 </body>
     

templates/services/services_page.html

@@ -85,10 +85,9 @@
           {{ page.section_four_img|richtext }}
         </div>
       </div>
-
     </div>
   </div>
-  <div class="container mx-auto px-4 py-6">
+  <div class="container mx-auto px-4 pb-5">
     <div class="relative">
       <div class="carousel-slider">
         <div class="carousel-list">
@@ -96,7 +95,7 @@
             {% 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>
+                <p class="text-center ">{{ item.carousel_name }}</p>
               </div>
             {% endif %}
           {% endfor %}