You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.3 KiB
122 lines
3.3 KiB
import "./common.js";
|
|
//#region js/solution2.js
|
|
function setActiveNav() {
|
|
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav");
|
|
if (!pageNav) return;
|
|
document.querySelectorAll(".site-header__nav a").forEach((link) => {
|
|
const active = link.textContent.trim().startsWith(pageNav);
|
|
link.classList.toggle("is-active", active);
|
|
});
|
|
}
|
|
function initCoreSwiper() {
|
|
const root = document.querySelector(".sl2-core");
|
|
const el = root?.querySelector(".sl2-core__swiper");
|
|
if (!root || !el || !window.Swiper) return;
|
|
|
|
const slideCount = el.querySelectorAll(".swiper-wrapper > .swiper-slide").length;
|
|
if (slideCount <= 2) {
|
|
root.classList.add("sl2-core--dual");
|
|
return;
|
|
}
|
|
new window.Swiper(el, {
|
|
slidesPerView: 1,
|
|
spaceBetween: 80,
|
|
speed: 600,
|
|
loop: true,
|
|
grabCursor: true,
|
|
observer: true,
|
|
observeParents: true,
|
|
watchOverflow: true,
|
|
autoplay: {
|
|
delay: 3e3,
|
|
disableOnInteraction: false
|
|
},
|
|
navigation: {
|
|
prevEl: root.querySelector(".sl2-core__head .s-arrows__prev"),
|
|
nextEl: root.querySelector(".sl2-core__head .s-arrows__next"),
|
|
},
|
|
pagination: {
|
|
el: root.querySelector(".sl2-core__pagination"),
|
|
clickable: true
|
|
},
|
|
breakpoints: { 1440: { slidesPerView: "auto" } }
|
|
});
|
|
}
|
|
function initSceneSwiper() {
|
|
const root = document.querySelector(".sl2-scene");
|
|
const el = root?.querySelector(".sl2-scene__swiper");
|
|
if (!root || !el || !window.Swiper) return;
|
|
new window.Swiper(el, {
|
|
slidesPerView: "auto",
|
|
spaceBetween: 40,
|
|
speed: 600,
|
|
observer: true,
|
|
observeParents: true,
|
|
watchOverflow: true,
|
|
navigation: {
|
|
prevEl: root.querySelector(".sl2-scene__head .s-arrows__prev"),
|
|
nextEl: root.querySelector(".sl2-scene__head .s-arrows__next")
|
|
},
|
|
breakpoints: {
|
|
0: {
|
|
slidesPerView: 1.2,
|
|
spaceBetween: 20,
|
|
navigation: {
|
|
prevEl: root.querySelector(".sl2-scene__arrows-mobile .s-arrows__prev"),
|
|
nextEl: root.querySelector(".sl2-scene__arrows-mobile .s-arrows__next")
|
|
}
|
|
},
|
|
768: { spaceBetween: 24 },
|
|
1200: { spaceBetween: 40 }
|
|
}
|
|
});
|
|
}
|
|
function initMoreSwiper() {
|
|
const root = document.querySelector(".sl2-more");
|
|
const el = root?.querySelector(".sl2-more__swiper");
|
|
if (!root || !el || !window.Swiper) return;
|
|
const slideCount = el.querySelectorAll(".swiper-wrapper > .swiper-slide").length;
|
|
// 一屏展示 3 条，不超过 3 条时隐藏切换按钮
|
|
if (slideCount <= 3) {
|
|
root.querySelectorAll(".sl2-more__head .s-arrows, .sl2-more__arrows-mobile").forEach((node) => {
|
|
node.style.display = "none";
|
|
});
|
|
}
|
|
new window.Swiper(el, {
|
|
slidesPerView: 3,
|
|
spaceBetween: 40,
|
|
speed: 600,
|
|
observer: true,
|
|
observeParents: true,
|
|
watchOverflow: true,
|
|
navigation: {
|
|
prevEl: root.querySelector(".sl2-more__head .s-arrows__prev"),
|
|
nextEl: root.querySelector(".sl2-more__head .s-arrows__next")
|
|
},
|
|
breakpoints: {
|
|
0: {
|
|
slidesPerView: 1.2,
|
|
spaceBetween: 20,
|
|
navigation: {
|
|
prevEl: root.querySelector(".sl2-more__arrows-mobile .s-arrows__prev"),
|
|
nextEl: root.querySelector(".sl2-more__arrows-mobile .s-arrows__next")
|
|
}
|
|
},
|
|
768: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 24
|
|
},
|
|
1200: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 40
|
|
}
|
|
}
|
|
});
|
|
}
|
|
$(function () {
|
|
setActiveNav();
|
|
initCoreSwiper();
|
|
initSceneSwiper();
|
|
initMoreSwiper();
|
|
});
|
|
//#endregion
|