Browse Source

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

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

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

@ -146,9 +146,7 @@
gap: 1.5rem;
margin-bottom: 3.125rem;
}
.sl2-core__head .s-arrows {
display: none;
}
.sl2-core__title {
margin: 0;
color: var(--color-text);
@ -262,7 +260,25 @@
.sl2-core__pagination .swiper-pagination-bullet-active::after {
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 {
padding-top: 7.5rem;
padding-bottom: 0;
@ -542,6 +558,9 @@
}
}
@media (max-width: 576px) {
.sl2-core__head .s-arrows {
display: none;
}
.sl2-hero__intro {
padding-top: calc(var(--header-h) + 5rem);
}

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

@ -12,6 +12,12 @@ 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,
@ -25,6 +31,10 @@ function initCoreSwiper() {
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

Loading…
Cancel
Save