From bd38abd572ddf87512ecdbbad91143b3b41e254c Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 23 Sep 2022 13:45:11 -0400
Subject: [PATCH] Added swiper below package grid.

---
 src/layouts/index.html           | 13 +++++++++++++
 src/layouts/partials/footer.html | 24 ++++++++++++++++++++++++
 src/layouts/partials/swiper.html | 26 ++++++++++++++++++++++++++
 3 files changed, 63 insertions(+)
 create mode 100644 src/layouts/partials/swiper.html

diff --git a/src/layouts/index.html b/src/layouts/index.html
index e04f67b..810db73 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -98,6 +98,19 @@
 
 {{- partial "package-grid.html" . -}}
 
+{{- partial "swiper.html" . -}}
+
+<!-- Style for Swiper -->
+
+<style>
+
+  .swiper {
+    width: 100%;
+    height: 100%;
+  }
+
+</style>
+
 <!-- Package CTA Section -->
 
 <section>
diff --git a/src/layouts/partials/footer.html b/src/layouts/partials/footer.html
index ea4c589..010acfc 100644
--- a/src/layouts/partials/footer.html
+++ b/src/layouts/partials/footer.html
@@ -149,3 +149,27 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     rdt('track', 'SignUp');
     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>
diff --git a/src/layouts/partials/swiper.html b/src/layouts/partials/swiper.html
new file mode 100644
index 0000000..5231640
--- /dev/null
+++ b/src/layouts/partials/swiper.html
@@ -0,0 +1,26 @@
+<!-- Slider main container -->
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <div class="swiper">
+        <!-- Additional required wrapper -->
+        <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>
+        <!-- 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>
+    </div>
+  </div>
+</div>