https://hakobus.co.jp/wp-content/themes/hakobus/assets/scripts/modules/top-pickup-swiper.js?ver=1.1.6

1/**
2 * Top Pickup Swiper Initialization
3 */
4document.addEventListener("DOMContentLoaded", function () {
5  const swiperElement = document.querySelector(".p-top-pickup__swiper");
6
7  if (swiperElement) {
8    // 元のスライド数を取得（ループ前）
9    const originalSlideCount =
10      swiperElement.querySelectorAll(".swiper-slide").length;
11
12    const pickupSwiper = new Swiper(".p-top-pickup__swiper", {
13      loop: true,
14      speed: 500,
15      slidesPerView: "auto",
16      spaceBetween: 20,
17
18      // 自動再生（自動スクロール）
19      autoplay: {
20        delay: 5000,
21        disableOnInteraction: false,
22      },
23
24      // Navigation
25      navigation: {
26        nextEl: ".p-top-pickup__nav--next",
27        prevEl: ".p-top-pickup__nav--prev",
28      },
29
30      // keep default swiper pagination (bullets) if needed
31      pagination: {
32        el: ".swiper-pagination",
33        clickable: true,
34      },
35
36      // Events for custom pagination UI
37      on: {
38        init: function () {
39          buildNumericPagination(originalSlideCount, this);
40          updatePagination(this, originalSlideCount);
41        },
42        slideChange: function () {
43          updatePagination(this, originalSlideCount);
44        },
45      },
46    });
47
48    // Build numeric pagination buttons (clickable)
49    // Place the list directly under `.p-top-pickup` (root) so it becomes a direct child.
50    function buildNumericPagination(total, swiper) {
51      const root = document.querySelector(".p-top-pickup");
52      if (!root) return;
53
54      // If a container already exists, reuse it; otherwise create one as a direct child.
55      let list = root.querySelector(".p-top-pickup__pagination-list");
56      if (!list) {
57        list = document.createElement("div");
58        list.className = "p-top-pickup__pagination-list";
59        root.appendChild(list);
60      }
61
62      // If buttons already built, skip
63      if (list.children && list.children.length) return;
64
65      for (let i = 0; i < total; i++) {
66        const btn = document.createElement("button");
67        btn.type = "button";
68        btn.className = "p-top-pickup__pagination-btn";
69        btn.setAttribute("aria-label", `${i + 1}ページへ`);
70        btn.setAttribute("aria-pressed", "false");
71        btn.textContent = i + 1;
72        btn.addEventListener("click", (e) => {
73          e.preventDefault();
74          swiper.slideToLoop(i);
75        });
76        list.appendChild(btn);
77      }
78    }
79
80    // Update numeric pagination UI and current/total labels
81    function updatePagination(swiper, totalCount) {
82      const currentEl = document.querySelector(
83        ".p-top-pickup__pagination-current",
84      );
85      const totalEl = document.querySelector(".p-top-pickup__pagination-total");
86      const btns = document.querySelectorAll(".p-top-pickup__pagination-btn");
87
88      if (currentEl && totalEl) {
89        currentEl.textContent = swiper.realIndex + 1;
90        totalEl.textContent = totalCount;
91      }
92
93      if (btns && btns.length) {
94        btns.forEach((b, idx) => {
95          const isActive = idx === swiper.realIndex;
96          b.classList.toggle("is-active", isActive);
97          b.setAttribute("aria-pressed", isActive ? "true" : "false");
98        });
99      }
100    }
101  }
102});