https://yoyaku-package.com/wp-content/themes/choicereserve/public/js/top/original/index.js?20260114020502

1window.addEventListener("load", function () {
2  var reasonItems = document.querySelectorAll(".js-reason_item");
3
4  const reasonObserver = new IntersectionObserver(
5    (entries) => {
6      entries.forEach((entry) => {
7        if (entry.isIntersecting) {
8          const thumbnailBg = entry.target.querySelector(
9            ".js-reason_item_thumbnail_bg"
10          );
11          if (thumbnailBg) {
12            thumbnailBg.classList.add("is-active");
13          }
14        }
15      });
16    },
17    {
18      threshold: 0.8,
19      rootMargin: "0px",
20    }
21  );
22
23  reasonItems.forEach((item) => {
24    reasonObserver.observe(item);
25  });
26
27  function stopSlide(targetSwiper) {
28    getTranslate = targetSwiper.getTranslate();
29    targetSwiper.setTranslate(getTranslate);
30    targetSwiper.setTransition(0);
31  }
32
33  function startSlide(targetSwiper, targetSlide, speed) {
34    getTranslate = targetSwiper.getTranslate();
35    const activeSlide = targetSlide.querySelector(".swiper-slide-active");
36    let getSlideWidthMgLeft = activeSlide.style.marginLeft;
37    if (getSlideWidthMgLeft) {
38      getSlideWidthMgLeft = parseFloat(getSlideWidthMgLeft);
39    } else {
40      getSlideWidthMgLeft = 0;
41    }
42    let getSlideWidthMgRight = activeSlide.style.marginRight;
43    if (getSlideWidthMgRight) {
44      getSlideWidthMgRight = parseFloat(getSlideWidthMgRight);
45    } else {
46      getSlideWidthMgRight = 0;
47    }
48    let getSlideWidth = activeSlide.offsetWidth;
49    let getTotalSlideWidth =
50      getSlideWidthMgLeft + getSlideWidthMgRight + getSlideWidth;
51    let diff = -getTotalSlideWidth - (getTranslate % getTotalSlideWidth);
52    let diffTime = diff / -getSlideWidth;
53    targetSwiper.setTranslate(getTranslate + diff);
54    targetSwiper.setTransition(speed * diffTime);
55  }
56
57  const clientSwiperSpeed = 4000;
58  let startClientX = null;
59  let totalX = null;
60  const clientLinkBody = document.getElementById("js-client_link_body");
61  const clientSlide = document.getElementById("js-client_slide");
62  const clientSwiper = new Swiper(clientSlide, {
63    loop: true,
64    freeMode: true,
65    slidesPerView: 3,
66    breakpoints: {
67      768: {
68        slidesPerView: 10,
69      },
70    },
71    navigation: {
72      nextEl: "#js-client_slide_next",
73      prevEl: "#js-client_slide_prev",
74    },
75    speed: clientSwiperSpeed,
76    autoplay: {
77      delay: 0,
78    },
79    on: {
80      sliderMove: function (_, event) {
81        const clientX = event.clientX || event.changedTouches[0].clientX;
82        if (startClientX) {
83          totalX = Math.abs(startClientX - clientX) + totalX;
84        }
85
86        startClientX = clientX;
87
88        if (totalX > 500) {
89          clientLinkBody.classList.add("is-blink");
90        }
91      },
92      touchEnd: function (_, event) {
93        switch (event.type) {
94          case "pointerup":
95            setTimeout(() => {
96              stopSlide(clientSwiper);
97            }, 50);
98            break;
99          case "touchend":
100            setTimeout(() => {
101              startSlide(clientSwiper, clientSlide, clientSwiperSpeed);
102            }, 50);
103            break;
104          default:
105            setTimeout(() => {
106              startSlide(clientSwiper, clientSlide, clientSwiperSpeed);
107            }, 50);
108        }
109      },
110    },
111  });
112
113  clientSlide.addEventListener("mouseenter", function () {
114    stopSlide(clientSwiper);
115  });
116
117  clientSlide.addEventListener("mouseleave", function () {
118    startSlide(clientSwiper, clientSlide, clientSwiperSpeed);
119  });
120
121  const industrySwiperSpeed = 8000;
122  const industrySlide = document.getElementById("js-industry_slide");
123
124  // カードサイズとspaceBetweenから slidesPerView を計算
125  const industryCardSize = 340;
126  const industrySpaceBetween = 33;
127  // 1680px時に340pxのカードになるよう計算: (1680 + 33) / (340 + 33) ≈ 4.593
128  const industrySlidesPerViewAt1600 =
129    (1680 + industrySpaceBetween) / (industryCardSize + industrySpaceBetween);
130
131  const industrySwiper = new Swiper(industrySlide, {
132    loop: true,
133    freeMode: true,
134    slidesPerView: 1.1,
135    centeredSlides: true,
136    breakpoints: {
137      768: {
138        slidesPerView: 2.5,
139      },
140      1200: {
141        slidesPerView: 3.3,
142      },
143      1600: {
144        slidesPerView: industrySlidesPerViewAt1600,
145      },
146    },
147    spaceBetween: industrySpaceBetween,
148    speed: industrySwiperSpeed,
149    autoplay: {
150      delay: 0,
151    },
152    on: {
153      touchEnd: function (_, event) {
154        switch (event.type) {
155          case "pointerup":
156            setTimeout(() => {
157              stopSlide(industrySwiper);
158            }, 50);
159            break;
160          case "touchend":
161            setTimeout(() => {
162              startSlide(industrySwiper, industrySlide, industrySwiperSpeed);
163            }, 50);
164            break;
165          default:
166            setTimeout(() => {
167              startSlide(industrySwiper, industrySlide, industrySwiperSpeed);
168            }, 50);
169        }
170      },
171    },
172  });
173
174  industrySlide.addEventListener("mouseenter", function () {
175    stopSlide(industrySwiper);
176  });
177
178  industrySlide.addEventListener("mouseleave", function () {
179    startSlide(industrySwiper, industrySlide, industrySwiperSpeed);
180  });
181});