https://ichihara-gc.com/ichihara/wp-content/themes/ichihara-wp/assets/js/main.js

1window.onload = function () {
2    var gnav = document.getElementById('gnav');
3    var gnavToggle = document.getElementById('gnav-toggle');
4
5    var topSlider = new Swiper('.top-slider', {
6        speed: 2500,
7        slidesPerView: 1,
8        loop: true,
9        effect: 'fade',
10        autoplay: {
11        delay: 5000,
12        },
13        // ページネーション
14        pagination: {
15            el: ".swiper-pagination",
16            clickable: true,
17        },
18        // 前後の矢印
19        navigation: {
20            nextEl: ".swiper-button-next",
21            prevEl: ".swiper-button-prev",
22        }
23    });
24
25    var bannerSlider = new Swiper('.banner-slider', {
26        speed: 400,
27        slidesPerView: 'auto',
28        spaceBetween: 30,
29        loop: true,
30        navigation: {
31            nextEl: '.swiper-button-next',
32            prevEl: '.swiper-button-prev',
33        },
34        breakpoints: {
35            768: {
36                slidesPerView: 3,
37            }
38        }
39    });
40
41    if (gnav && gnavToggle) {
42        gnavToggle.addEventListener('click', toggleGnav, false);
43    }
44
45    function toggleGnav() {
46        gnav.classList.toggle('is-active');
47        gnavToggle.classList.toggle('is-active');
48    }
49}
50
51// 商品画像サムネイル付き
52$(function () {
53    //サムネイル
54    var sliderThumbnail = new Swiper('.js_thumbSlideThumb', {
55        speed: 1000,
56        slidesPerView: 4,
57        spaceBetween: 10,
58        freeMode: true,
59        watchSlidesVisibility: true,
60        watchSlidesProgress: true,
61        breakpoints: {
62            768: {
63                spaceBetween: 15
64            }
65        }
66    });
67
68    //スライダー（メイン）
69    var slider = new Swiper('.js_thumbSlide', {
70        speed: 1000,
71        navigation: {
72            nextEl: '.swiper-button-next',
73            prevEl: '.swiper-button-prev',
74        },
75        thumbs: {
76            swiper: sliderThumbnail
77        }
78    });
79});
80
81// クラブハウススライダー
82// const swiper = new Swiper(".swiper", {
83    // ページネーションが必要なら追加
84//     pagination: {
85//         el: ".swiper-pagination",
86//         clickable: true
87//     },
88// });
89
90// 複数埋め込みにも対応するよう、youtubeというclassに対してループで処理
91$('.youtube').each(function() {
92  var iframe = $(this).children('iframe');
93
94  // data-srcからURLを取得
95  var url = iframe.attr('data-src');
96  // URLから動画IDを取得
97  var id = url.match(/[\/?=]([a-zA-Z0-9_-]{11})[&\?]?/)[1];
98
99  // 動画IDを使用してサムネイル画像を取得・配置
100  iframe.before('<img src="https://img.youtube.com/vi/'+id+'/maxresdefault.jpg" />').remove();
101
102  // 動画クリックした時の処理
103  $(this).on('click', function() {
104    // 矢印をフェードで非表示
105    $(this).siblings('.arrow').fadeOut(400);
106    // 動画IDからを埋め込み用タグを生成
107    $(this).after('<div class="youtube"><iframe src="https://www.youtube.com/embed/'+id+'?=loop=1&playlist='+id+'&modestbranding=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>').remove();
108  });
109});
110