15308555518/ website
1
0
Fork 0
mirror of https://github.com/kubesphere/website.git synced 2025-12-26 00:12:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Add silder pagination 

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
This commit is contained in:
TheYoungManLi 2021-11-30 22:12:45 +08:00
parent fc6cf09961
commit da5d340c8d
2 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/scss/live.scss
View File

@ -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%;
}

8
layouts/live/list.html
View File

@ -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 () {