From 53729d41207b819ece50f66b191b5727269d31f0 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 23 Sep 2022 17:23:20 -0400
Subject: [PATCH] Switched up the horizontal scroll paradigm for mobile

---
 src/layouts/index.html           | 28 +++++++++++++++++++++++
 src/layouts/partials/footer.html | 38 +++++++++++---------------------
 src/layouts/partials/swiper.html | 23 +++++++------------
 3 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index ccf666d..8b6cfec 100644
--- a/src/layouts/index.html
+++ b/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 -->
diff --git a/src/layouts/partials/footer.html b/src/layouts/partials/footer.html
index 010acfc..95abbe0 100644
--- a/src/layouts/partials/footer.html
+++ b/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>
diff --git a/src/layouts/partials/swiper.html b/src/layouts/partials/swiper.html
index 5231640..f4174ad 100644
--- a/src/layouts/partials/swiper.html
+++ b/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>