Browse Source

feat: 更新核心滑块逻辑和样式以支持双滑块布局

master
peijunlei 3 weeks ago
parent
commit
3bea385206
  1. 27
      public/themes/dist_static/static/css/solution2.css
  2. 12
      public/themes/dist_static/static/js/solution2.js

27
public/themes/dist_static/static/css/solution2.css

@ -146,9 +146,7 @@
gap: 1.5rem; gap: 1.5rem;
margin-bottom: 3.125rem; margin-bottom: 3.125rem;
} }
.sl2-core__head .s-arrows {
display: none;
}
.sl2-core__title { .sl2-core__title {
margin: 0; margin: 0;
color: var(--color-text); color: var(--color-text);
@ -262,7 +260,25 @@
.sl2-core__pagination .swiper-pagination-bullet-active::after { .sl2-core__pagination .swiper-pagination-bullet-active::after {
background: var(--color-primary); background: var(--color-primary);
} }
.sl2-core--dual .sl2-core__head .s-arrows {
display: none;
}
.sl2-core--dual .sl2-core__swiper {
overflow: visible;
}
.sl2-core--dual .swiper-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5rem;
}
.sl2-core--dual .sl2-core__slide {
width: auto;
max-width: 56.25rem;
opacity: 1;
}
.sl2-core--dual .sl2-core__pagination {
display: none;
}
.sl2-scene { .sl2-scene {
padding-top: 7.5rem; padding-top: 7.5rem;
padding-bottom: 0; padding-bottom: 0;
@ -542,6 +558,9 @@
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.sl2-core__head .s-arrows {
display: none;
}
.sl2-hero__intro { .sl2-hero__intro {
padding-top: calc(var(--header-h) + 5rem); padding-top: calc(var(--header-h) + 5rem);
} }

12
public/themes/dist_static/static/js/solution2.js

@ -12,6 +12,12 @@ function initCoreSwiper() {
const root = document.querySelector(".sl2-core"); const root = document.querySelector(".sl2-core");
const el = root?.querySelector(".sl2-core__swiper"); const el = root?.querySelector(".sl2-core__swiper");
if (!root || !el || !window.Swiper) return; 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, { new window.Swiper(el, {
slidesPerView: 1, slidesPerView: 1,
spaceBetween: 80, spaceBetween: 80,
@ -25,6 +31,10 @@ function initCoreSwiper() {
delay: 3e3, delay: 3e3,
disableOnInteraction: false disableOnInteraction: false
}, },
navigation: {
prevEl: root.querySelector(".sl2-core__head .s-arrows__prev"),
nextEl: root.querySelector(".sl2-core__head .s-arrows__next"),
},
pagination: { pagination: {
el: root.querySelector(".sl2-core__pagination"), el: root.querySelector(".sl2-core__pagination"),
clickable: true clickable: true
@ -61,7 +71,7 @@ function initSceneSwiper() {
} }
}); });
} }
$(function() {
$(function () {
setActiveNav(); setActiveNav();
initCoreSwiper(); initCoreSwiper();
initSceneSwiper(); initSceneSwiper();

Loading…
Cancel
Save