Changing Carousel

static/css/style.css

@@ -198,9 +198,7 @@ body.side-menu.active {
 .content-open:before {
   position: absolute;
   top: 0;
-  right: 0;
-  left: 0;
-  bottom: -2000000000px;
+  bottom: 0;
   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 {
-  from{
-    left: 100%;
-  }to{
-    left: calc(100px * -1);
+.carousel-item {
+  width: calc(100% / 6);
+  flex: 0 0 calc(100% / 6); 
+  text-align: center;
+}
+
+@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; 
+        };