From da5d340c8dec3e5b210f54e49bf96fc1a6b18033 Mon Sep 17 00:00:00 2001
From: TheYoungManLi <cjl@kubesphere.io>
Date: Tue, 30 Nov 2021 22:12:45 +0800
Subject: [PATCH] fix: Add silder pagination

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
---
 assets/scss/live.scss  | 14 ++++++++++++++
 layouts/live/list.html |  8 ++++++++
 2 files changed, 22 insertions(+)

diff --git a/assets/scss/live.scss b/assets/scss/live.scss
index 0c7c59dab..6f08044cb 100644
--- a/assets/scss/live.scss
+++ b/assets/scss/live.scss
@@ -673,4 +673,18 @@
       }
     }
   }
+}
+
+.my-bullet-active {
+  background: #55bc8a;
+  opacity: 1;
+}
+
+.swiper-horizontal>.swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal,
+.swiper-pagination-custom,
+.swiper-pagination-fraction {
+  bottom: 5px;
+  left: 0;
+  width: 100%;
 }
\ No newline at end of file
diff --git a/layouts/live/list.html b/layouts/live/list.html
index 575bf3d32..e71ec8629 100644
--- a/layouts/live/list.html
+++ b/layouts/live/list.html
@@ -102,6 +102,7 @@
                 <div class="swiper autoMeetUp">
                     <div id="swiper-wrapper" class="swiper-wrapper">
                     </div>
+                    <div class="swiper-pagination"></div>
                 </div>
                 <div class="prev-button"></div>
                 <div class="next-button"></div>
@@ -254,6 +255,13 @@
                 option.slidesPerView = 3
                 option.spaceBetween = 20
             }
+
+            if (documentWidth < 800) {
+                option.pagination = {
+                    el: '.swiper-pagination',
+                    bulletActiveClass: 'my-bullet-active',
+                }
+            }
             this.current = new Swiper('.swiper', option)
         },
         init: function () {