Added swiper below package grid.

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>

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>

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>