https://minohkankou.net/wp-content/themes/minohkankou/js/swiper.js?ver=7.1.2

1'use strict';
2
3// スライダー
4$(function () {
5    const swiper00 = new Swiper(".l-top_seasonalinfo .swiper-contents-info .swiper", {
6    loop: true,
7    speed: 800,
8    slidesPerView: 'auto',
9    spaceBetween: 26,
10    centeredSlides: false,
11    autoplay: {
12      delay: 3000,
13      disableOnInteraction: false,
14    },
15    pagination: {
16      el: ".swiper-pagination",
17      clickable: true,
18    },
19    navigation: {
20      nextEl: ".swiper-button-next",
21      prevEl: ".swiper-button-prev",
22    },
23    breakpoints: {
24      769: {
25        spaceBetween: 34,
26      },
27      1024: {
28        spaceBetween: 48,
29      },
30    },
31  });
32
33    // スライド数をカウント（.swiper-slide の数を確認）
34  const slideCount01 = document.querySelectorAll(".l-top_seasonalinfo .swiper-contents-pick .swiper-slide").length;
35
36  // ページネーション設定をスライド数で分岐
37  const paginationSetting01 = slideCount01 <= 8
38    ? {
39        el: ".swiper-pagination",
40        clickable: true,
41      }
42    : {
43        el: ".swiper-pagination",
44        type: "fraction",
45      };
46  const swiper01 = new Swiper(".l-top_seasonalinfo .swiper-contents-pick .swiper", {
47    loop: true,
48    speed: 800,
49    slidesPerView: 'auto',
50    spaceBetween: 26,
51    centeredSlides: false,
52    autoplay: {
53      delay: 3000,
54      disableOnInteraction: false,
55    },
56    pagination: paginationSetting01,
57    navigation: {
58      nextEl: ".swiper-button-next",
59      prevEl: ".swiper-button-prev",
60    },
61    breakpoints: {
62      769: {
63        spaceBetween: 32,
64      },
65      1024: {
66        spaceBetween: 32,
67      },
68    },
69  });
70
71  let swiper02 = null;
72
73  function toggleSwiper() {
74    const screenWidth = $(window).width();
75
76    if (screenWidth >= 1024) {
77      if (swiper02) {
78        swiper02.destroy(true, true);
79        swiper02 = null;
80        $(".l-top_modelcourse .swiper-wrapper").removeAttr("style");
81        $(".l-top_modelcourse .swiper-slide").removeAttr("style");
82      }
83    } else {
84      if (!swiper02) {
85        swiper02 = new Swiper(".l-top_modelcourse .swiper", {
86          loop: true,
87          speed: 800,
88          slidesPerView: 'auto',
89          spaceBetween: 12,
90          centeredSlides: false,
91          autoplay: {
92            delay: 3000,
93            disableOnInteraction: false,
94          },
95          pagination: {
96            el: ".swiper-pagination",
97            clickable: true,
98          },
99          navigation: {
100            nextEl: ".swiper-button-next",
101            prevEl: ".swiper-button-prev",
102          },
103          breakpoints: {
104            590: {
105              spaceBetween: 24,
106            },
107            900: {
108              spaceBetween: 50,
109            },
110          },
111        });
112      }
113    }
114  }
115  toggleSwiper();
116  $(window).on("resize", toggleSwiper);
117
118  const swiper03 = new Swiper(".l-top_banner .swiper", {
119    loop: true,
120    speed: 800,
121    slidesPerView: 2,
122    spaceBetween: 12,
123    centeredSlides: true,
124    initialSlide: 1,
125    autoplay: {
126      delay: 3000,
127      disableOnInteraction: false,
128    },
129    pagination: {
130      el: ".swiper-pagination",
131      type: "fraction",
132    },
133    navigation: {
134      nextEl: ".swiper-button-next",
135      prevEl: ".swiper-button-prev",
136    },
137    breakpoints: {
138      769: {
139        slidesPerView: 'auto',
140        spaceBetween: 12,
141      },
142    },
143  });
144
145  const sliderThumbnail = new Swiper(".slider-thumbnail", {
146    slidesPerView: 8,
147    spaceBetween: 5,
148    breakpoints: {
149      769: {
150        spaceBetween: 8,
151      },
152    },
153  });
154  const swiper04 = new Swiper(".swiper-contents-04 .slider", {
155    loop: true,
156    speed: 800,
157    slidesPerView: 1,
158    centeredSlides: true,
159    autoplay: {
160      delay: 3000,
161      disableOnInteraction: false,
162    },
163    thumbs: {
164      swiper: sliderThumbnail,
165    },
166    navigation: {
167      nextEl: ".swiper-button-next",
168      prevEl: ".swiper-button-prev",
169    },
170  });
171
172  // スライド数をカウント（.swiper-slide の数を確認）
173  const slideCount05 = document.querySelectorAll(".swiper-contents-05 .swiper-slide").length;
174
175  // ページネーション設定をスライド数で分岐
176  const paginationSetting05 = slideCount05 <= 8
177    ? {
178        el: ".swiper-pagination",
179        clickable: true,
180      }
181    : {
182        el: ".swiper-pagination",
183        type: "fraction",
184      };
185
186  const swiper05 = new Swiper(".swiper-contents-05 .swiper", {
187    loop: true,

188    speed: 800,
189    slidesPerView: 2,
190    spaceBetween: 16,
191    centeredSlides: false,
192    autoplay: {
193      delay: 3000,
194      disableOnInteraction: false,
195    },
196    pagination: paginationSetting05,
197    navigation: {
198      nextEl: ".swiper-button-next",
199      prevEl: ".swiper-button-prev",
200    },
201    breakpoints: {
202      769: {
203        slidesPerView: 4,
204        spaceBetween: 30,
205      },
206    },
207  });
208
209  function initializeSwiper(selector) {
210    const sliderCount = $(selector + " .swiper-slide").length;
211    const isLoop = sliderCount > 2;
212
213    return new Swiper(selector + " .swiper", {
214      loop: isLoop,
215      speed: 800,
216      slidesPerView: 1.6,
217      spaceBetween: 16,
218      centeredSlides: false,
219      autoplay: {
220        delay: 3000,
221        disableOnInteraction: false,
222      },
223      pagination: {
224        el: selector + " .swiper-pagination",
225        clickable: true,
226      },
227      navigation: {
228        nextEl: selector + " .swiper-button-next",
229        prevEl: selector + " .swiper-button-prev",
230      },
231      breakpoints: {
232        769: {
233          slidesPerView: 3,
234          spaceBetween: 32,
235          loop: isLoop,
236        },
237      },
238    });
239  }
240
241  // swiperの初期化
242  const swiper06_01 = initializeSwiper(".swiper-contents-06_01");
243  const swiper06_02 = initializeSwiper(".swiper-contents-06_02");
244  const swiper06_03 = initializeSwiper(".swiper-contents-06_03");
245  const swiper06_04 = initializeSwiper(".swiper-contents-06_04");
246  const swiper06_05 = initializeSwiper(".swiper-contents-06_05");
247  const swiper06_06 = initializeSwiper(".swiper-contents-06_06");
248  const swiper06_07 = initializeSwiper(".swiper-contents-06_07");
249  const swiper06_08 = initializeSwiper(".swiper-contents-06_08");
250  const swiper06_09 = initializeSwiper(".swiper-contents-06_09");
251  const swiper06_10 = initializeSwiper(".swiper-contents-06_10");
252
253  const swiper07 = new Swiper(".swiper-contents-07 .swiper", {
254    loop: true,
255    speed: 800,
256    slidesPerView: 1,
257    autoplay: {
258      delay: 5000,
259      disableOnInteraction: false,
260    },
261    pagination: {
262      el: ".swiper-pagination",
263      clickable: true,
264    },
265    navigation: {
266      nextEl: ".swiper-button-next",
267      prevEl: ".swiper-button-prev",
268    },
269  });
270  const swiper08 = new Swiper(".swiper-contents-yuzuru .swiper", {
271    loop: true,
272    speed: 800,
273    slidesPerView: 1.3,
274    spaceBetween: 16,
275    centeredSlides: false,
276    autoplay: {
277        delay: 3000,
278        disableOnInteraction: false,
279    },
280    pagination: {
281      el: ".swiper-pagination",
282      clickable: true,
283    },
284    navigation: {
285      nextEl: ".swiper-button-next",
286      prevEl: ".swiper-button-prev",
287    },
288    breakpoints: {
289      769: {
290        slidesPerView: 3,
291        spaceBetween: 32,
292      },
293    },
294  });
295
296  const swiper09 = new Swiper(".mv-swiper-container.swiper", {
297    loop: true,
298    speed: 1000,
299    effect: 'fade',
300    autoplay: {
301        delay: 3000,
302    },
303    allowTouchMove: false,
304  });
305
306
307  // スライダーのマッピング
308  const sliders = {
309    swiper00: swiper00,
310    swiper01: swiper01,
311    swiper02: swiper02,
312    swiper03: swiper03,
313    swiper05: swiper05,
314    swiper06_01: swiper06_01,
315    swiper06_02: swiper06_02,
316    swiper06_03: swiper06_03,
317    swiper06_04: swiper06_04,
318    swiper06_05: swiper06_05,
319    swiper06_06: swiper06_06,
320    swiper06_07: swiper06_07,
321    swiper06_08: swiper06_08,
322    swiper06_09: swiper06_09,
323    swiper06_10: swiper06_10,
324  };
325
326  // 汎用再生・停止ボタンイベント
327  $(".swiper-button-stop").on("click", function () {
328    const sliderKey = $(this).data("slider");
329    const slider = sliders[sliderKey];
330
331    if ($(this).hasClass("stop")) {
332      $(this)
333        .removeClass("stop")
334        .addClass("start")
335        .attr("aria-label", "スライダーの自動再生を開始")
336        .attr("aria-pressed", "false")
337      slider.autoplay.stop();
338    } else {
339      $(this)
340        .removeClass("start")
341        .addClass("stop")
342        .attr("aria-label", "スライダーの自動再生を停止")
343        .attr("aria-pressed", "true")
344      slider.autoplay.start();
345    }
346  });
347
348  // アクセシビリティ: ボタンの初期状態を設定
349  $(".swiper-button-stop").each(function () {
350    $(this).attr("aria-label", "スライダーの自動再生を停止");
351    $(this).attr("aria-pressed", "true");
352  });
353
354  // スライダー領域にアクセシビリティ要素を追加
355  $(".swiper").attr({
356    "role": "region",
357    "aria-live": "polite",
358    "aria-roledescription": "スライダー",
359  });
360
361
362  // スライダーの数が少ない場合、再生・停止ボタンを非表示
363  document.querySelectorAll('.swiper-contents .swiper').forEach((slider) => {
364    const pagination = slider.querySelector('.swiper-pagination');
365    const stopButton = slider.querySelector('.swiper-button-stop');
366
367    if (pagination && stopButton) {
368      const checkPaginationLock = () => {
369        if (pagination.classList.contains('swiper-pagination-lock')) {
370          stopButton.style.display = 'none';
371          slider.style.paddingBottom = '0'; // swiper の padding-bottom を 0 に設定
372        } else {
373          stopButton.style.display = '';
374          slider.style.paddingBottom = ''; // 初期値に戻す
375        }
376      };
377
378      // 初期状態を確認してボタンの表示を設定
379      checkPaginationLock();
380
381      // MutationObserver でクラスの変化を監視
382      const observer = new MutationObserver(() => {
383        checkPaginationLock();
384      });
385
386      observer.observe(pagination, { attributes: true });
387    }
388  });
389
390});
391
392
393// TOPページのMVのリサイズ
394$(function () {

395  function updateMvBackgrounds() {
396    const useSp = window.innerWidth <= 768;
397
398    $('.mv-bg').each(function () {
399      const $slide = $(this);
400      const spImg = $slide.data('sp');
401      const pcImg = $slide.data('pc');
402      const currentBg = $slide.css('background-image');
403      const targetUrl = useSp ? spImg : pcImg;
404
405      if (targetUrl && !currentBg.includes(targetUrl)) {
406        $slide.css('background-image', `url('${targetUrl}')`);
407      }
408    });
409  }
410
411  // 初期実行
412  updateMvBackgrounds();
413
414  // リサイズ時も実行
415  $(window).on('resize', function () {
416    updateMvBackgrounds();
417  });
418});