Switched up the horizontal scroll paradigm for mobile

src/layouts/index.html

@@ -139,6 +139,34 @@
     height: 100%;
   }
 
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    width: 90% !important;
+    margin-right: 10px !important;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+  }
+
+  .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
 </style>
 
 <!-- Package CTA Section -->

src/layouts/partials/footer.html

@@ -42,8 +42,7 @@
   </div>
 </section>
 
-<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
 
 <!-- JavaScript Bundle with Popper -->
 
@@ -150,26 +149,15 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     rdt('track', 'ViewContent');
   </script>
 
-<script>
-  const swiper = new Swiper('.swiper', {
-  // Optional parameters
-  direction: 'horizontal',
-  loop: true,
-
-  // If we need pagination
-  pagination: {
-    el: '.swiper-pagination',
-  },
-
-  // Navigation arrows
-  navigation: {
-    nextEl: '.swiper-button-next',
-    prevEl: '.swiper-button-prev',
-  },
-
-  // And if we need scrollbar
-  scrollbar: {
-    el: '.swiper-scrollbar',
-  },
-});
-</script>
+  <script>
+    var swiper = new Swiper(".mySwiper", {
+      slidesPerView: 3,
+      spaceBetween: 10,
+      freeMode: true,
+      loop: true,
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+    });
+  </script>

src/layouts/partials/swiper.html

@@ -1,26 +1,19 @@
 <!-- Slider main container -->
-<div class="container">
   <div class="row">
     <div class="col">
-      <div class="swiper">
-        <!-- Additional required wrapper -->
+      <div class="swiper mySwiper">
         <div class="swiper-wrapper">
-          <!-- Slides -->
           <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
           <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
           <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          ...
+          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</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> -->
-
-        <!-- If we need scrollbar -->
-        <div class="swiper-scrollbar"></div>
+        <!-- <div class="swiper-pagination"></div> -->
       </div>
     </div>
   </div>
-</div>