https://ishikawa-antenna.jp/top/js/top.js

1'use strict';
2
3/*----------------------------------------------------------------------
4@function関数
5----------------------------------------------------------------------*/
6
7// 1024px以下で活性化するSwiper
8function initSwiper() {
9	let eventSwiper = null;
10	let conceptSwiper = null;
11	const mediaQuery = window.matchMedia('(max-width: 1024px)');
12
13	const checkBreakpoint = (e) => {
14		if (e.matches) {
15			beginSwiper();
16		//} else if (eventSwiper) {
17		//	eventSwiper.destroy(false, true);
18		} else if (conceptSwiper) {
19			conceptSwiper.destroy(false, true);
20		}
21	}
22
23	const beginSwiper = () => {
24		//イベント Swiper
25		eventSwiper = new Swiper('.eventSwiper', {
26			slidesPerView: 'auto',
27			spaceBetween: 30,
28			centeredSlides: true,
29			speed: 500,
30			scrollbar: {
31				el: '.eventSwiperWrapper .swiper-scrollbar',
32			},
33			breakpoints: {
34				//751以上
35				751: {
36					slidesPerView: 'auto',
37					spaceBetween: 30,
38					centeredSlides: false,
39				}
40			}
41		});
42
43		//コンセプト Swiper
44		conceptSwiper = new Swiper('.conceptSwiper', {
45			spaceBetween: 30,
46			pagination: {
47				el: '.conceptSwiperWrapper .swiper-pagination',
48				clickable: true,
49				type: 'bullets',
50			},
51			speed: 500,
52		});
53	};
54
55	mediaQuery.addEventListener('change', checkBreakpoint);
56	checkBreakpoint(mediaQuery);
57
58}
59
60
61// 商品紹介Swiper
62let productsSwiper;
63function createProductSwiper() {
64	const productSlidePerView = document.querySelectorAll('.productsSwiper .swiper-slide').length;
65
66	if ( window.matchMedia('(max-width: 750px)').matches ) {
67
68		// SP -----
69		if ( productSlidePerView > 1 ) {
70
71			productsSwiper = new Swiper('.productsSwiper', {
72				slidesPerView: 'auto',
73				centeredSlides: true,
74				loop: (productSlidePerView > 3),
75				loopAdditionalSlides: 1,
76				autoplay: {
77					delay: 5000,
78					pauseOnMouseEnter: true,
79					disableOnInteraction: false,
80					waitForTransition: false,
81				},
82				pagination: {
83					el: '.productsSwiperWrapper .swiper-pagination',
84					clickable: true,
85					type: 'bullets',
86				},
87				speed: 500
88			});
89		}
90
91	} else {
92
93		// PC -----
94		if ( productSlidePerView > 3 && !( window.matchMedia('(min-width: 1681px)').matches && productSlidePerView < 5 ) ) {
95
96			productsSwiper = new Swiper('.productsSwiper', {
97				slidesPerView: 'auto',
98				centeredSlides: true,
99				loop: (productSlidePerView > 4),
100				loopAdditionalSlides: 1,
101				autoplay: {
102					delay: 5000,
103					pauseOnMouseEnter: true,
104					disableOnInteraction: false,
105					waitForTransition: false,
106				},
107				pagination: {
108					el: '.productsSwiperWrapper .swiper-pagination',
109					clickable: true,
110					type: 'bullets',
111				},
112				speed: 500,
113				breakpoints: {
114					//1260以上
115					1260: {
116						loop: (productSlidePerView > 5),
117					},
118					// 1321以上
119					1321: {
120						loop: false,
121					}
122				},
123			});
124		}
125	}
126}	// createProductSwiper()
127
128
129
130
131
132/*----------------------------------------------------------------------
133@実行
134----------------------------------------------------------------------*/
135document.addEventListener('DOMContentLoaded', function () {
136
137	//MV Swiper
138	const mvSwiper = new Swiper('.mvSwiper', {
139		allowTouchMove: false,
140		effect: 'fade',
141		fadeEffect: {
142			crossFade: true,
143		},
144		loop: true,
145		loopAdditionalSlides: 0,
146		autoplay: {
147			delay: 5000,
148			disableOnInteraction: false,
149			waitForTransition: false,
150		},
151		speed: 900,
152	});
153
154	//外部バナー Swiper
155	const bnrSwiper = new Swiper('.bnrSwiper', {
156		slidesPerView: 2,
157		spaceBetween: 15,
158		loop: true,
159		loopAdditionalSlides: 1,
160		navigation: {
161			nextEl: '.bnrSwiperWrapper .swiper-button-next',
162			prevEl: '.bnrSwiperWrapper .swiper-button-prev',
163		},
164		autoplay: {
165			delay: 5000,
166			pauseOnMouseEnter: true,
167			disableOnInteraction: false,
168			waitForTransition: false,
169		},
170		speed: 500,
171		breakpoints: {
172			//751以上
173			751: {
174				slidesPerView: 4,//5
175				spaceBetween: 10,
176			},
177			//1025以上
178			1025: {
179				slidesPerView: 4,//6
180				spaceBetween: 10,
181			}
182		}
183	});
184
185});
186
187/*-----------------------------------------------*/
188
189window.addEventListener('load', function(){
190
191	//商品 Swiper
192	createProductSwiper();
193
194	//1024px以下で活性化するSwiperをよびだす
195	initSwiper();
196
197
198	// Resize ---------------------------------------------
199	// リサイズ後に処理を実行する
200	let timer = false;
201	window.addEventListener('resize', function(){
202		if (timer !== false) clearTimeout(timer);
203		timer = setTimeout(function(){
204
205			//1024px以下で活性化するSwiperをよびだす
206			initSwiper();
207
208			//商品 Swiper
209			if (productsSwiper) productsSwiper.destroy(false, true);
210			createProductSwiper();
211
212		}, 200);
213	});
214
215});
216