From e6ca3529ec838c118a16602b5e23d07e4dc2975a Mon Sep 17 00:00:00 2001
From: mohin7 <mohin@appscode.com>
Date: Fri, 20 Sep 2024 18:04:52 +0600
Subject: [PATCH] Add slider

Signed-off-by: mohin7 <mohin@appscode.com>
---
 hugo_stats.json              |  7 +------
 layouts/_default/events.html | 37 ++++++------------------------------
 static/assets/js/main.js     | 17 +++++++++++++++++
 3 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/hugo_stats.json b/hugo_stats.json
index 5bb2697502..e77b7e0b48 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -144,6 +144,7 @@
       "disaster-recovery",
       "dots-style",
       "embeded-console-button",
+      "event-wrapper",
       "events-page",
       "fa",
       "fa-angle-down",
@@ -226,20 +227,16 @@
       "is-12",
       "is-3",
       "is-4",
-      "is-4-dekstop",
       "is-4-desktop",
       "is-48x48",
       "is-5",
-      "is-5-desktop",
       "is-6",
       "is-6-desktop",
       "is-6-tablet",
       "is-64x64",
       "is-7",
       "is-8",
-      "is-8-dekstop",
       "is-8-desktop",
-      "is-8-touch",
       "is-8-until-fullhd",
       "is-8-widescreen",
       "is-9",
@@ -296,7 +293,6 @@
       "is-one-third-tablet",
       "is-one-third-widescreen",
       "is-one-thirds-fullhd",
-      "is-outlined",
       "is-paddingless",
       "is-paddingless-desktop",
       "is-primary",
@@ -394,7 +390,6 @@
       "outlined-bg-buttons",
       "owl-carousel",
       "p-0",
-      "p-8",
       "package-area",
       "partner",
       "partner-hero-area",
diff --git a/layouts/_default/events.html b/layouts/_default/events.html
index 53ea136679..7dec404ae4 100644
--- a/layouts/_default/events.html
+++ b/layouts/_default/events.html
@@ -7,13 +7,12 @@
 <section class="events-page bg-gradient-1" style="background-image: url(../assets/images/gradient-bg.webp);">
     <div class="container">
         <div class="columns is-multiline">
-            {{ $currentDate := now.Format "2006-01-02" }}  <!-- Format current date -->
+            <div class="owl-carousel event-wrapper">
+                {{ $currentDate := now.Format "2006-01-02" }}  <!-- Format current date -->
 
-            <!-- Get the latest event -->
-            {{ $sortedEvents := sort (where $.Site.Data.events "sort_date" "ge" $currentDate) "sort_date" "ase" }}
-            {{ $lastEvent := first 1 $sortedEvents }}
-            {{ range $event := $lastEvent }}
-            <div class="column is-full-mobile is-6-tablet is-8-desktop">
+                <!-- Get the latest event -->
+                {{ $sortedEvents := sort (where $.Site.Data.events "sort_date" "ge" $currentDate) "sort_date" "ase" }}
+                {{ range $event := $sortedEvents }}
                 <div class="single-event primary-gradient">
                     <span class="circle circle-1"></span>
                     <div class="is-flex is-justify-content-space-between">
@@ -28,32 +27,8 @@ <h2>{{ $event.title }}</h2>
                         <a href="{{ $event.event_details }}" target="_blank" class="button ac-button is-transparent has-text-white">Event Details</a>
                     </div>
                 </div>
+                {{ end }}
             </div>
-            {{ end }}
-
-            <!-- Display the rest of the events excluding the last one -->
-            {{ $lastEventID := (index $sortedEvents 0).id }}
-            {{ $restEvents := where $sortedEvents "id" "!=" $lastEventID }}
-
-            {{ range $event := sort $restEvents "sort_date" "ase" }}
-            <div class="column is-full-mobile is-6-tablet is-4-desktop">
-                <div class="single-event">
-                    <div class="is-flex is-justify-content-space-between">
-                        <span class="date">{{ $event.date }}</span>
-                    </div>
-                    <h2>{{ $event.title }}</h2>
-                    <p class="is-ellipsis-4">{{ $event.description }}</p>
-
-                    <div class="buttons is-gap-8">
-                        <a href="{{ $event.meet_with_us }}" class="button ac-button is-outlined is-small">Join with us</a>
-                        <a href="{{ $event.event_details }}" target="_blank" class="button ac-button is-transparent p-8">Event Details</a>
-                    </div>
-                </div>
-            </div>
-            {{ end }}
-
-
-
         </div>
         <!-- <div class="columns is-centered">
             <div class="column is-full-mobile is-2-desktop">
diff --git a/static/assets/js/main.js b/static/assets/js/main.js
index 5907108137..e752c864fd 100644
--- a/static/assets/js/main.js
+++ b/static/assets/js/main.js
@@ -122,6 +122,23 @@ Array.from(responsiveMenus).forEach((menu, idx) => {
 });
 
 
+$('.event-wrapper').owlCarousel({
+  loop:true,
+  nav:true,
+  autoplay:true,
+  responsive:{
+      0:{
+          items:1
+      },
+      600:{
+          items:1
+      },
+      1000:{
+          items:1
+      }
+  }
+})
+
 //mechanism tabs =============================================start
 
   // Get all the single-feature mechanism elements