Browse Source

feat(solution2): 条数 ≤3 时隐藏箭头

master
peijunlei 2 weeks ago
parent
commit
46d63ef88a
  1. 7
      public/themes/dist_static/static/js/solution2.js
  2. 2
      public/themes/website/1/zh/demo/solution2.html

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

@ -75,6 +75,13 @@ function initMoreSwiper() {
const root = document.querySelector(".sl2-more"); const root = document.querySelector(".sl2-more");
const el = root?.querySelector(".sl2-more__swiper"); const el = root?.querySelector(".sl2-more__swiper");
if (!root || !el || !window.Swiper) return; 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, { new window.Swiper(el, {
slidesPerView: 3, slidesPerView: 3,
spaceBetween: 40, spaceBetween: 40,

2
public/themes/website/1/zh/demo/solution2.html

@ -199,7 +199,7 @@ $current_cate_id = $current_cate['id'] ?? 0;
</section> </section>
{/if} {/if}
{if !empty($sub_cates[5])} {if !empty($sub_cates[5])}
<!-- 其他解决方案 -->
<section class="sl2-more section__wrap" id="more" data-header-dark> <section class="sl2-more section__wrap" id="more" data-header-dark>
<div class="sl2-more__head"> <div class="sl2-more__head">
<h2 class="sl2-more__title">{$sub_cates[5]['title'] ?? ''}</h2> <h2 class="sl2-more__title">{$sub_cates[5]['title'] ?? ''}</h2>

Loading…
Cancel
Save