https://gofukuoka.jp/js/top.js

1$(function(){
2
3var $window = $(window),
4		breakPoint = 820, //ブレイクポイントの設定
5		winW = $window.width(), //画面の横幅
6		winH = $window.height(), //画面の縦幅
7		// anchorSpeed = 400, //アンカーリンクのスムーズスクロールのスピード
8		resizeTimer = false,
9		menuOpenFlag = false;
10
11/* トップaboutPC時複製
12*********************************************/
13function duplicateSlidesForPC() {
14	if (winW <= breakPoint) return; // PCのみ
15	if ($('.home-about-detail__item.is-duplicated').length) return; // 二重複製防止
16
17	// detail
18	var $detailWrapper = $('.home-about-detail .swiper-wrapper');
19	var $detailSlides = $('.home-about-detail__item.swiper-slide');
20
21	$detailSlides.each(function() {
22		var $clone = $(this).clone();
23		$clone.addClass('is-duplicated');
24		$detailWrapper.append($clone);
25	});
26
27	// image
28	var $imageWrapper = $('.home-about-image .swiper-wrapper');
29	var $imageSlides = $('.home-about-image__item.swiper-slide');
30
31	$imageSlides.each(function() {
32		var $clone = $(this).clone();
33		$clone.addClass('is-duplicated');
34		$imageWrapper.append($clone);
35	});
36}
37
38// 初回実行
39duplicateSlidesForPC();
40
41/* swiper
42*********************************************/
43//トップaboutテキスト
44var homeAboutDetailSwiper = new Swiper('.home-about-detail', {
45	// loop: true,
46	freeMode: true,
47	watchSlidesProgress: true,
48	watchSlidesVisibility: true,
49	effect: 'fade',
50	allowTouchMove: false,
51	fadeEffect: {
52		crossFade: true,
53	},
54});
55
56//トップabout画像
57var homeAboutImageSwiper = new Swiper('.home-about-image', {
58	loop: true,
59	slidesPerView: 1,
60	spaceBetween: '3.6%',
61	speed: 700,
62	navigation: {
63		nextEl: '.swiper-button-next',
64		prevEl: '.swiper-button-prev',
65	},
66	thumbs: {
67		swiper: homeAboutDetailSwiper,
68	},
69	pagination: { //ドット部分をサムネイルにする記述
70		el: '.swiper-pagination',
71		clickable: true,
72		renderBullet: function(index, className) {
73		var src = $('.home-about-image__item').eq(index+1).find('img').attr('src');
74		var alt = $('.home-about-image__item').eq(index+1).find('img').attr('alt');
75		return '<div class="home-about-image__thumb__item ' + className + '"><img src="'+src+'" alt="'+alt+'"></div>';
76		}
77	},
78	breakpoints: {
79		821: { //821px以上
80			slidesPerView: 5.25,
81		}
82	}
83});
84
85//トップmustsees
86var homeMustsees = new Swiper('.home-mustsees-slide', {
87	loop: true,
88	navigation: {
89		nextEl: '.home-mustsees-slide-wrap .swiper-button-next',
90		prevEl: '.home-mustsees-slide-wrap .swiper-button-prev',
91	},
92});
93
94
95/********************************************
96 [PC ONLY]
97*********************************************/
98function pcSizeOnly(){
99
100	/* HOMEボタンDOM移動
101	*********************************************/
102	$('.home-links').each(function() {
103		const btn = $(this).find('.home-links__button');
104		const head = $(this).find('.home-links__head');
105		btn.appendTo(head);
106	});
107
108	/* HOME INFORMATION ボタンDOM移動
109	*********************************************/
110	$('.home-information').each(function() {
111		const btn = $(this).find('.home-information__button-wrap');
112		const head = $(this).find('.home-information__head');
113		btn.appendTo(head);
114	});
115
116	/* Things to do タイトルDOM移動
117	*********************************************/
118	$('.home-things-to-do').each(function() {
119		const title = $(this).find('.home-things-to-do__title');
120		const pcHead = $(this).find('.home-things-to-do__head');
121		title.prependTo(pcHead);
122	});
123
124}
125// PCメニューサイズ用分岐
126// function pcMenuSizeOnly(){
127
128// }
129
130/********************************************
131 [SP ONLY]
132*********************************************/
133function spSizeOnly(){
134
135	/* HOMEボタンDOM移動
136	*********************************************/
137	$('.home-links').each(function() {
138		const btn = $(this).find('.home-links__button');
139		const list = $(this).find('.home-links__list');
140		btn.insertAfter(list);
141	});
142
143	/* HOME INFORMATION ボタンDOM移動
144	*********************************************/
145	$('.home-information').each(function() {
146		const btn = $(this).find('.home-information__button-wrap');
147		const banners = $(this).find('.home-information__banners');

148		btn.insertAfter(banners);
149	});
150
151	/* Things to do タイトルDOM移動
152	*********************************************/
153	$('.home-things-to-do').each(function() {
154		const title = $(this).find('.home-things-to-do__title');
155		const spContainer = $(this).find('.home-things-to-do');
156		title.prependTo(spContainer);
157	});
158}
159// SPメニューサイズ用分岐
160// function spMenuSizeOnly(){
161
162// }
163
164/********************************************
165 [PC/SP切り替え] 以下編集不可
166*********************************************/
167function descriminateBp(){
168	winW = $window.width();
169	if(winW <= breakPoint){
170		spSizeOnly();
171	}else if(winW > breakPoint){
172		pcSizeOnly();
173	}
174	// ブレイクポイントを増やす場合
175	// if(winW <= 1000){
176	// 	spMenuSizeOnly();
177	// }else if(winW > 1000){
178	// 	pcMenuSizeOnly();
179	// }
180}
181descriminateBp();
182$window.resize(function() {
183	if(winW > $window.width() || winW < $window.width()){
184		if (resizeTimer !== false) {
185			clearTimeout(resizeTimer);
186		}
187		resizeTimer = setTimeout(descriminateBp, 200);
188	}
189});
190
191});