diff --git a/public/themes/dist_static/static/js/about.js b/public/themes/dist_static/static/js/about.js index 02e8a18..ed07026 100644 --- a/public/themes/dist_static/static/js/about.js +++ b/public/themes/dist_static/static/js/about.js @@ -83,40 +83,84 @@ function initMembersCarousel() { const el = root.querySelector(".ab-members__panels-swiper"); const buttons = [...root.querySelectorAll(".ab-members__logo")]; if (!el || !buttons.length) return; + + const mobileMq = window.matchMedia("(max-width: 576px)"); + const getGroupSize = () => mobileMq.matches ? 2 : 5; + const total = buttons.length; const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; - const canLoop = buttons.length > 1; + const initial = Math.max(0, buttons.findIndex((btn) => btn.classList.contains("is-active"))); + const swiper = new SwiperCtor(el, { - initialSlide: Math.max(0, buttons.findIndex((btn) => btn.classList.contains("is-active"))), - loop: canLoop, + initialSlide: initial, + loop: false, grabCursor: true, speed: 600, - autoplay: canLoop && !reduceMotion ? { - delay: 3e3, - disableOnInteraction: false, - pauseOnMouseEnter: true - } : false + autoplay: false }); - const logos = root.querySelector(".ab-members__logos"); + const syncNav = (index) => { + const GROUP = getGroupSize(); + const groupStart = Math.floor(index / GROUP) * GROUP; buttons.forEach((btn, i) => { + const inGroup = total <= GROUP || (i >= groupStart && i < groupStart + GROUP); + btn.hidden = !inGroup; const on = i === index; btn.classList.toggle("is-active", on); btn.setAttribute("aria-selected", on ? "true" : "false"); }); - const btn = buttons[index]; - if (logos && btn) { - const left = btn.offsetLeft - (logos.clientWidth - btn.offsetWidth) / 2; - logos.scrollTo({ left: Math.max(0, left), behavior: "smooth" }); + }; + + const goTo = (index) => { + const next = Math.max(0, Math.min(index, total - 1)); + swiper.slideTo(next); + syncNav(next); + }; + + /** 组内下一项;组末跳到下一组第一个;全部结束后回到 0 */ + const nextInSequence = () => { + const GROUP = getGroupSize(); + const i = swiper.activeIndex; + const groupStart = Math.floor(i / GROUP) * GROUP; + const groupEnd = Math.min(groupStart + GROUP - 1, total - 1); + if (i < groupEnd) goTo(i + 1); + else if (groupEnd + 1 < total) goTo(groupEnd + 1); + else goTo(0); + }; + + let timer = null; + const stopAutoplay = () => { + if (timer) { + clearInterval(timer); + timer = null; } }; + const startAutoplay = () => { + stopAutoplay(); + if (reduceMotion || total <= 1) return; + timer = setInterval(nextInSequence, 3e3); + }; + buttons.forEach((btn, i) => { btn.addEventListener("click", () => { - if (canLoop) swiper.slideToLoop(i); - else swiper.slideTo(i); + goTo(i); + startAutoplay(); }); }); - swiper.on("slideChange", () => syncNav(swiper.realIndex)); - syncNav(swiper.realIndex); + swiper.on("slideChange", () => syncNav(swiper.activeIndex)); + + const onGroupBreakpoint = () => { + syncNav(swiper.activeIndex); + startAutoplay(); + }; + if (mobileMq.addEventListener) mobileMq.addEventListener("change", onGroupBreakpoint); + else mobileMq.addListener(onGroupBreakpoint); + + const card = root.querySelector(".ab-members__card"); + card?.addEventListener("mouseenter", stopAutoplay); + card?.addEventListener("mouseleave", startAutoplay); + + syncNav(swiper.activeIndex); + startAutoplay(); } $(function() { setActiveNav(); diff --git a/public/themes/website/1/en/demo/about.html b/public/themes/website/1/en/demo/about.html index 453bcde..feddad2 100644 --- a/public/themes/website/1/en/demo/about.html +++ b/public/themes/website/1/en/demo/about.html @@ -230,7 +230,7 @@
{php}$member_idx = 0;{/php} - {hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,url,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"} + {hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="50" mainField="id,url,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"}
@@ -248,7 +248,7 @@
{php}$member_idx = 0;{/php} - {hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="10" mainField="id,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"} + {hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="50" mainField="id,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"}