https://www.ishizawa-lab.co.jp/common/js/home.js

1// JavaScript Document
2// グローバル変数 ===================================
3const mediaQuery = window.matchMedia('(min-width: 751px)');
4
5// functions ===================================
6
7// メインビジュアルの初期化関数
8// メインビジュアルをPCで縦に2個積み上げる機能は2023年8月以降一度も使われていなかったため削除
9function mainVisualInitialize() {
10  mainvisualSwiper();
11
12  // swiper セッティング
13  function mainvisualSwiper() {
14    // トップページ > メインビジュアル
15    homeMainvisual = new Swiper('.js-homeMainvisual', {
16      wrapperClass: 'mainVisualSlider__container',
17      slideClass: 'mainVisualSlider__slide',
18      slidesPerView: 1.15,
19      spaceBetween: 10,
20      centeredSlides: true,
21      loop: true,
22      autoplay: {
23        delay: 4000,// 4秒停止
24        disableOnInteraction: false,// ユーザー操作後も停止しない
25      },
26      navigation: {
27        nextEl: ".js-homeMainvisual .c-sliderNavi__button--next",
28        prevEl: ".js-homeMainvisual .c-sliderNavi__button--prev",
29      },
30      pagination: {
31        el: ".js-homeMainvisual .c-sliderPagination",
32        clickable: true,
33      },
34      breakpoints: {
35        // 751px以上でPCモード
36        751: {
37          slidesPerView: 'auto',
38          spaceBetween: 0,
39          centeredSlides: false,
40          speed: 500,
41          autoplay: {
42            delay: 5000,// 0秒停止
43            disableOnInteraction: false,// ユーザー操作後も停止しない
44          },
45          threshold: 10,// ドラッグ操作と判定されるまでの距離
46        },
47      },
48    });
49  };
50};
51
52// MV以外のスライダー設定 /////////
53function homeSwiper() {
54  // トップページ > カテゴリ

55  const homeCategory = new Swiper('.js-homeCategory .categorySlider__container', {
56    wrapperClass: 'categorySlider__list',
57    slideClass: 'c-categorySlide',
58    slidesPerView: 2.6,
59    loop: true,
60    autoplay: {
61      delay: 4000,// 4秒停止
62      disableOnInteraction: false,// ユーザー操作後も停止しない
63    },
64    navigation: {
65      nextEl: ".js-homeCategory .c-sliderNavi__button--next",
66      prevEl: ".js-homeCategory .c-sliderNavi__button--prev",
67    },
68    breakpoints: {
69      // 751px以上でPCモード
70      751: {
71        slidesPerView: 5,
72      },
73      // 1121px以上でPCモード
74      1121: {
75        slidesPerView: 6,
76      },
77    },
78  });
79
80  // トップページ > ブランド
81  const homeBrand = new Swiper('.js-homeBrand .c-brandSlider__container', {
82    wrapperClass: 'c-brandSlider__list',
83    slideClass: 'c-brandSlider__slide',
84    slidesPerView: 3,
85    spaceBetween: 16,
86    // freeMode: true,
87    // loop: true,   
88    autoplay: {
89      delay: 4000,// 4秒停止
90      disableOnInteraction: false,// ユーザー操作後も停止しない
91    },
92    autoplayDisableOnInteraction: false,
93    navigation: {
94      nextEl: ".js-homeBrand .c-sliderNavi__button--next",
95      prevEl: ".js-homeBrand .c-sliderNavi__button--prev",
96    },
97    breakpoints: {
98      // 751px以上でPCモード
99      751: {
100        slidesPerView: 6,
101        pagination: {
102          el: ".js-homeBrand .c-sliderPagination",
103          clickable: true,
104        },
105      },
106    },
107  });
108
109  // 新商品・ランキングスライダー遅延読み込み
110  const sliders = [
111    // トップページ > ランキング
112    {
113      id: 'load-rankingSlider',
114      src: '/common/module/menu-rankingSlider.php',
115      init: function () {

116        new Swiper('.js-homeRanking .c-productSlider__container', {
117          wrapperClass: 'c-productSlider__list',
118          slideClass: 'c-productSlide',
119          slidesPerView: 2.6,
120          observer: true,
121          observeParents: true,
122          autoplay: {
123            delay: 4000,
124            disableOnInteraction: false,
125          },
126          navigation: {
127            nextEl: ".js-homeRanking .c-sliderNavi__button--next",
128            prevEl: ".js-homeRanking .c-sliderNavi__button--prev",
129          },
130          breakpoints: {
131            751: {
132              slidesPerView: 5,
133            },
134          },
135        });
136      }
137    },   
138  ];
139
140  sliders.forEach(function (slider) {
141    // console.log("test");
142    const target = document.getElementById(slider.id);
143
144    if (!target) {
145      console.warn(`${slider.id} が見つかりません`);
146      return;
147    }
148
149    let myXml = new XMLHttpRequest();// 初期設定
150
151    myXml.onreadystatechange = function () {
152      if (myXml.readyState === 4 && myXml.status === 200) {        
153        target.innerHTML = myXml.responseText;
154
155        // DOMが入った直後にSwiper初期化
156        slider.init();
157      }
158    };
159
160    myXml.open('GET', slider.src, true);//読み込み
161    myXml.send(null);// 初期化
162  });
163};
164
165// ブログ記事　遅延対策の読み込み
166function loadBlog() {
167  const blogs = [
168    { 'id': 'news-inner', 'src': '/common/module/index-news.php' },
169    { 'id': 'enjoy-inner', 'src': '/common/module/index-enjoy.php' },
170    { 'id': 'henai-inner', 'src': '/common/module/index-henai.php' }
171  ];
172  blogs.forEach(function (value, i) {
173    let myXml = new XMLHttpRequest();// 初期設定
174    myXml.onreadystatechange = function () {
175      if ((myXml.readyState === 4) && (myXml.status === 200)) {
176        document.getElementById(value['id']).innerHTML = myXml.responseText;
177      }
178    }
179    myXml.open('GET', value['src'], true);//読み込み
180    myXml.send(null);// 初期化
181  });
182};
183
184
185// DOMツリー構築完了時の処理 ===================================
186document.addEventListener('DOMContentLoaded', function () {
187  mainVisualInitialize(mediaQuery);
188  loadBlog();
189  homeSwiper();
190});
191
192// ブレークポイント通過時の処理 =========================
193mediaQuery.addEventListener('change', function () {
194  // なし
195});