mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
fix: Let meetup card auto slide
Signed-off-by: TheYoungManLi <33231138+weili520@users.noreply.github.com>
This commit is contained in:
TheYoungManLi
parent
67957539b2
commit
2786b13726
|
|
@ -387,7 +387,7 @@
|
|||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
height: 535px;
|
||||
background-image: linear-gradient(147.87deg, #4A499A 16%, #8552C3 85.01%);;
|
||||
background-image: linear-gradient(147.87deg, #4A499A 16%, #8552C3 85.01%);
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
|
|
@ -423,12 +423,9 @@
|
|||
&>ul {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
overflow: scroll;
|
||||
background: linear-gradient(to top, rgba(255, 255, 255, 0.08) 5%, transparent 5%) no-repeat;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
|
|
@ -448,40 +445,32 @@
|
|||
}
|
||||
|
||||
.yearBox {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 377px;
|
||||
overflow: hidden;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: flex;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
.hiddenUl {
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.autoMeetUp {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.swiper-slide {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
height: 258px;
|
||||
width: 373px;
|
||||
position: relative;
|
||||
margin-right: 20px;
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 330px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
&:nth-child(2) {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -492,88 +481,145 @@
|
|||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
.imgBox {
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 14px;
|
||||
font-size: 8px;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
|
||||
background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
|
||||
img {
|
||||
margin-top: 20px;
|
||||
width: 373px;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
right: 10px;
|
||||
bottom: 35px;
|
||||
button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 14px;
|
||||
padding: 9px 16px;
|
||||
border-radius: 16px;
|
||||
font-size: 8px;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
|
||||
background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 375px) {
|
||||
.swiper-slide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 376px) and (max-width: $mobile-max-width) {
|
||||
|
||||
.swiper-slide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
li {
|
||||
&:nth-child(2) {
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 373px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) and (max-width: 1160px) {
|
||||
|
||||
li {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 320px !important;
|
||||
height: 180px !important;
|
||||
}
|
||||
|
||||
button {
|
||||
right: 10px;
|
||||
bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-arrow {
|
||||
display: block;
|
||||
background: url('/images/live/arrow.svg');
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 151px;
|
||||
left: 0px;
|
||||
transform: rotate(180deg);
|
||||
cursor: pointer;
|
||||
.prev-button {
|
||||
display: block;
|
||||
background: url('/images/live/arrow.svg');
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 153.5px;
|
||||
left: 0px;
|
||||
transform: rotate(180deg);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: url('/images/live/arrow-hover.svg');
|
||||
@media only screen and (max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $mobile-max-width) and (max-width: 1160px) {
|
||||
left: 20px;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: url('/images/live/arrow-hover.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
display: block;
|
||||
background: url('/images/live/arrow.svg');
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 151px;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
.next-button {
|
||||
display: block;
|
||||
background: url('/images/live/arrow.svg');
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 153.5px;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: url('/images/live/arrow-hover.svg');
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
@media only screen and (min-width: $mobile-max-width) and (max-width: 1160px) {
|
||||
right: 20px;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: url('/images/live/arrow-hover.svg');
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $mobile-max-width) {
|
||||
.show {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -78,25 +78,33 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
<span id="leftArrow" class="left-arrow"></span>
|
||||
<div class="yearBox" id="meetup-list">
|
||||
{{ range .list }}
|
||||
{{ range $index,$data := .list }}
|
||||
{{ with . }}
|
||||
<ul>
|
||||
<ul class="hiddenUl" id="needClone_{{ $index }}">
|
||||
{{ range .meetup }}
|
||||
{{ with . }}
|
||||
<li>
|
||||
<p>{{ .place }}</p>
|
||||
<img src="{{ .img }}">
|
||||
<a href="{{ .meetupUrl | safeURL }}" target="_blank" rel="noopener noreferrer"><button>{{ i18n "Wonderful review" }}</button></a>
|
||||
<div class="imgBox">
|
||||
<img src="{{ .img }}">
|
||||
<a href="{{ .meetupUrl | safeURL }}" target="_blank" rel="noopener noreferrer">
|
||||
<button>{{ i18n "Wonderful review" }}</button>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<div class="swiper autoMeetUp">
|
||||
<div id="swiper-wrapper" class="swiper-wrapper">
|
||||
</div>
|
||||
</div>
|
||||
<div class="prev-button"></div>
|
||||
<div class="next-button"></div>
|
||||
</div>
|
||||
<span id="rightArrow" class="right-arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -216,80 +224,106 @@
|
|||
initPagination(videos)
|
||||
}
|
||||
|
||||
var splitHtmlToNew = function (data) {
|
||||
var resetElement = document.createElement('div')
|
||||
var docWidth = $(document).width()
|
||||
var newCollection = []
|
||||
resetElement.className = 'swiper-slide'
|
||||
if (docWidth > 800) {
|
||||
Array.prototype.forEach.call(data, function (item, index) {
|
||||
if (index > 0 && index % 3 === 0) {
|
||||
const newDiv = document.createElement('div')
|
||||
newDiv.appendChild(data[index - 3])
|
||||
newDiv.appendChild(data[index - 2])
|
||||
newDiv.appendChild(data[index - 1])
|
||||
newDiv.className = 'swiper-slide'
|
||||
newCollection.push(newDiv)
|
||||
}
|
||||
if (index >= data.length - 2) {
|
||||
resetElement.appendChild(data[index])
|
||||
}
|
||||
})
|
||||
newCollection.push(resetElement)
|
||||
} else {
|
||||
Array.prototype.forEach.call(data, function (item, index) {
|
||||
data[index].className = 'swiper-slide'
|
||||
newCollection.push(data[index])
|
||||
})
|
||||
}
|
||||
return newCollection
|
||||
}
|
||||
|
||||
var autoplayTime = 6000
|
||||
|
||||
var mySwiper = {
|
||||
current: null,
|
||||
create: function () {
|
||||
this.current = new Swiper('.swiper', {
|
||||
autoplay: {
|
||||
running: true,
|
||||
pauseOnMouseEnter: true,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
delay: autoplayTime,
|
||||
speed: 500,
|
||||
loop: true,
|
||||
})
|
||||
},
|
||||
init: function () {
|
||||
const elements = $('#needClone_0').children().filter('li').clone()
|
||||
const newContent = splitHtmlToNew(elements)
|
||||
if (newContent.length === 0) {
|
||||
return
|
||||
}
|
||||
$('#swiper-wrapper').empty().append(newContent)
|
||||
}
|
||||
}
|
||||
|
||||
var MeetupInit = function () {
|
||||
var ulHead = $('#meetup-ul');
|
||||
var ulList = $('#meetup-list');
|
||||
var tabActiveIndex = 0;
|
||||
ulHead.children('li')[0].className = 'active';
|
||||
ulList.children()[0].className = 'active';
|
||||
|
||||
ulHead.children('li').filter(function (index) {
|
||||
return index === 0
|
||||
}).addClass('active')
|
||||
mySwiper.create()
|
||||
$('#meetup-ul li').click(function (e) {
|
||||
var clickIndex = $(this).index();
|
||||
var preActiveINdex = $('#meetup-ul li.active')
|
||||
if (tabActiveIndex === clickIndex) {
|
||||
return
|
||||
} else {
|
||||
tabActiveIndex = clickIndex
|
||||
}
|
||||
var preActiveINdex = $('#meetup-ul li.active')
|
||||
var preUlBox = ulList.children()[preActiveINdex.index()];
|
||||
var clickUlBox = ulList.children()[clickIndex];
|
||||
preActiveINdex.removeClass('active')
|
||||
ulHead.children('li')[clickIndex].className = 'active'
|
||||
clickUlBox.className = 'active'
|
||||
preUlBox.className = ''
|
||||
ClickButton()
|
||||
ulHead.children('li').filter(function (index) {
|
||||
return index === tabActiveIndex
|
||||
}).addClass('active')
|
||||
var elements = $('#needClone_' + tabActiveIndex).children().filter('li').clone()
|
||||
$('#swiper-wrapper').empty().append(splitHtmlToNew(elements))
|
||||
mySwiper.current.destroy()
|
||||
mySwiper.create()
|
||||
})
|
||||
ClickButton()
|
||||
}
|
||||
|
||||
var judgeButton = function (start, total) {
|
||||
var leftArrow = $('#leftArrow');
|
||||
var rightArrow = $('#rightArrow');
|
||||
if (start >= total) {
|
||||
leftArrow.removeClass('hidden').addClass('show')
|
||||
rightArrow.removeClass('show').addClass('hidden')
|
||||
} else if (start <= 1) {
|
||||
leftArrow.removeClass('show').addClass('hidden')
|
||||
rightArrow.removeClass('hidden').addClass('show')
|
||||
} else {
|
||||
leftArrow.removeClass('hidden').addClass('show')
|
||||
rightArrow.removeClass('hidden').addClass('show')
|
||||
}
|
||||
var initSliderButton = function () {
|
||||
$('.prev-button').click(function (e) {
|
||||
var swiper = mySwiper.current.slidePrev()
|
||||
})
|
||||
$('.next-button').click(function (e) {
|
||||
var swiper = mySwiper.current.slideNext()
|
||||
})
|
||||
}
|
||||
|
||||
var ClickButton = function () {
|
||||
var leftArrow = $('#leftArrow');
|
||||
var rightArrow = $('#rightArrow');
|
||||
var stepWidth = 1179;
|
||||
leftArrow.removeClass('show').addClass('hidden');
|
||||
rightArrow.removeClass('show').addClass('hidden');
|
||||
leftArrow.unbind('click')
|
||||
rightArrow.unbind('click')
|
||||
|
||||
var ulList = $('#meetup-list');
|
||||
var ulListChild = $('#meetup-list').children();
|
||||
var activeUl = $('#meetup-list ul.active');
|
||||
var starStep = 1;
|
||||
var totalStep = Math.ceil(activeUl.width() / ulList.width());
|
||||
|
||||
ulListChild.each(item => {
|
||||
ulListChild[item].style = ''
|
||||
})
|
||||
if (totalStep >= 2) {
|
||||
rightArrow.removeClass('hidden').addClass('show');
|
||||
}
|
||||
|
||||
rightArrow.click(function (e) {
|
||||
activeUl[0].style = 'transform: translateX(-' + (starStep * stepWidth) + 'px);';
|
||||
starStep += 1;
|
||||
judgeButton(starStep, totalStep);
|
||||
})
|
||||
|
||||
leftArrow.click(function (e) {
|
||||
starStep = starStep - 1;
|
||||
var left = starStep * stepWidth;
|
||||
activeUl[0].style = 'transform: translateX(-' + (left - stepWidth) + 'px);';
|
||||
judgeButton(starStep, totalStep);
|
||||
var documentResize = function () {
|
||||
var resizeTimer = null
|
||||
$(window).resize(function () {
|
||||
clearTimeout(resizeTimer)
|
||||
resizeTimer = setTimeout(function () {
|
||||
mySwiper.current.destroy()
|
||||
mySwiper.init()
|
||||
mySwiper.create()
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -297,6 +331,9 @@
|
|||
bindClickVideoLi()
|
||||
initVideos()
|
||||
initModal()
|
||||
mySwiper.init()
|
||||
MeetupInit()
|
||||
initSliderButton()
|
||||
//documentResize()
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
<link rel="stylesheet" href="/fonts/ProximaNova/stylesheet.css">
|
||||
<link rel="stylesheet" href="/css/jquery.modal.min.css">
|
||||
<link rel="stylesheet" href="/css/viewer.min.css">
|
||||
<link rel="stylesheet" href="/swiper/swiper-bundle.min.css">
|
||||
|
||||
{{ $common := resources.Get "scss/common.scss" | toCSS | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $common.RelPermalink }}">
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
<script src='{{ "js/jquery-3.5.0.min.js" | relURL }}'></script>
|
||||
<script src='{{ "js/viewer.min.js" | relURL }}'></script>
|
||||
<script src='{{ "js/jquery.modal.min.js" | relURL }}'></script>
|
||||
<script src='{{ "swiper/swiper-bundle.min.js" | relURL }}'></script>
|
||||
|
||||
{{ if .IsDescendant (.GetPage "/docs") }}
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue