moving logo invest pahang

resources/css/site.css

@@ -11,6 +11,17 @@
     font-style: normal;
 }
 
+.swiper {
+    width: 100%;
+    height: 70px;
+  }
+
+  .swiper-button-next,
+.swiper-button-prev {
+    display: none !important;
+}
+
+
 * {
     margin: 0;
     font-family: 'Space Grotesk', sans-serif;

resources/js/site.js

@@ -2,8 +2,22 @@ function isMobileDevice() {
     return /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent);
 }
 
+function initSwiper() {
+    const swiper = new Swiper('.swiper', {
+        // Optional parameters
+        direction: 'horizontal',
+        loop: true,
+        slidesPerView:11,
+        autoplay:{
+            delay:1000
+        }
+      });
+}
+
 (()=>{
 
+    initSwiper();
+
     let demoButton = document.getElementById("demo-btn");
     if(demoButton) demoButton.addEventListener('click', () => {
 

resources/views/home.antlers.html

@@ -225,10 +225,61 @@
         <h2 class="text-start text-md-end text-secondary text-highlight2">
             We are always here for you
         </h2>
+        <div style="width: 100%; padding-bottom: 250px;">
+            <!-- Slider main container -->
+            <div class="swiper">
+                <!-- Additional required wrapper -->
+                <div class="swiper-wrapper">
+                    <!-- Slides -->
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                    <div class="swiper-slide">
+                        <img class="img-fluid" src="../assets/images/logo-invest-pahang.jpg" />
+                    </div>
+                </div>
+                <!-- If we need pagination -->
+                <div class="swiper-pagination"></div>
+
+                <!-- If we need navigation buttons -->
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-button-next"></div>
 
-        <div class="d-flex" style="overflow: hidden;padding-bottom: 300px;">
-            <div class="bg-danger" style="width: 250px; height: 50px;">
-                <img src="../assets/images/investpahanglist.jpg" />
+                <!-- If we need scrollbar -->
+                <div class="swiper-scrollbar"></div>
             </div>
         </div>
 

resources/views/layout.antlers.html

@@ -10,20 +10,27 @@
         integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"
         defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
 
     {{ vite src="resources/js/site.js|resources/css/site.css" }}
 
 </head>
 
 <body class="bg-white">
+
     {{ partial:partials/navbar }}
     <div class="">
         {{ template_content }}
+        
     </div>
     {{ partial:partials/footer }}
+
 </body>
 
 </html>