https://carrojapan.co.jp/wp/wp-content/themes/carro/assets/js/top.js

1window.addEventListener('DOMContentLoaded', function () {
2	const car_slides = document.querySelector('#car_slides');
3	const car_slide_text = document.querySelector('.car_slide_text');
4	let current_catch_index = 1;
5	const fv_slide = new Splide(car_slides,{
6		type: "loop",
7		focus:'center',
8		perPage:1,
9		perMove: 1,
10		gap :'40px',
11		autoplay:true,
12		speed:2000,
13		interval: 3000,
14		autoWidth:true,
15		pagination: false,
16		arrows:false,
17		padding : "10%",
18		flickMaxPages: 1,
19    flickPower: 100,
20		dragMinThreshold: {
21			mouse: 0,
22			touch: 10,
23		},
24		// drag:false,
25		breakpoints: {
26			768 :{
27				padding : "0%"
28			}
29		}
30	})
31
32	fv_slide.on('moved', function () {
33		const catch_text = fv_slide.Components.Slides.getAt(fv_slide.index).slide.dataset.catch;
34
35		if(current_catch_index != catch_text){
36			car_slide_text.querySelector('.catch0' + current_catch_index).classList.remove('_current');
37			car_slide_text.querySelector('.catch0' + catch_text).classList.add('_current');
38			current_catch_index = catch_text;
39		}
40
41	})
42	fv_slide.mount();
43
44
45
46	const pickup_slide = document.querySelector('#pickup_slider');
47
48	if(pickup_slide){
49		const pickup_slider = new Splide(pickup_slide,{
50			type: "loop",
51			focus: 'center',
52			gap:'20px',
53			autoplay:true,
54			speed:2000,
55			perPage:3,
56			perMove: 1,
57			pagination: true,
58			arrows:true,
59			fixedWidth:'350px',
60			flickMaxPages: 1,
61      flickPower: 200,
62
63			breakpoints: {
64				768 :{
65					padding : "5%",
66					perPage: 1
67				}
68			}
69		})
70		pickup_slider.on( 'overflow', function ( isOverflow ) {
71
72			// 十分なスライドがあるときの処理（ループスライダー有効）
73			pickup_slider.options = {
74				autoplay: isOverflow,
75				arrows: isOverflow,
76				pagination: isOverflow,
77				drag: isOverflow,
78				clones: isOverflow ? 1: 0,
79			};
80		});
81		pickup_slider.mount();
82	}
83
84	const car_model_slider = document.querySelector('#car_model_slider');
85
86	if(car_model_slider){
87		const car_model_slide = new Splide(car_model_slider,{
88			type: "loop",
89			gap :'15px',
90			autoplay:true,
91			speed:2000,
92			perPage: 1,
93			perMove: 1,
94			pagination: true,
95			arrows:true,
96			fixedWidth:'356px',
97			flickMaxPages: 1,
98      flickPower: 100,
99			breakpoints: {
100				992: {
101					gap :'8px',
102					fixedWidth:'246px'
103				},
104			},
105		})
106		car_model_slide.on( 'overflow', function ( isOverflow ) {
107
108			// 十分なスライドがあるときの処理（ループスライダー有効）
109			car_model_slide.options = {
110				autoplay: isOverflow,
111				arrows: isOverflow,
112				pagination: isOverflow,
113				drag: isOverflow,
114				clones: isOverflow ? 3 : 0,
115			};
116		});
117		car_model_slide.mount();
118	}
119
120
121	const article_slider = document.querySelectorAll('.article_slider');
122
123	article_slider.forEach(function(slider){
124		const slide_count = slider.querySelectorAll('.splide__slide').length;
125
126		const section_slider = new Splide(slider,{
127			type: "loop",
128			gap :'20px',
129			autoplay:true,
130			focus:0,
131			speed:2000,
132			perPage:1,
133			perMove: 1,
134			arrows:true,
135			autoWidth:false,
136			fixedWidth:'350px',
137			flickMaxPages: 1,
138			drag:true,
139			pagination:false,
140      flickPower: 100,
141
142			breakpoints: {
143				991 :{
144					autoWidth:true,
145					fixedWidth:false,
146					focus:'center',
147				}
148			}
149		})
150
151		section_slider.on('overflow', function (isOverflow){
152
153			if(window.matchMedia('(max-width: 991px)').matches){
154				section_slider.options = {
155					arrows: isOverflow,
156					clones: isOverflow ? 1 : 0,
157					drag: isOverflow,
158				};
159				// Autoplayコンポーネントはoptions更新を購読していないため、再生/停止はAPIを直接呼ぶ
160				if(isOverflow){
161					section_slider.Components.Autoplay.play();
162				} else {
163					section_slider.Components.Autoplay.pause();
164				}
165				return;
166			}
167			else{
168				const enable_loop = isOverflow && slide_count > 2;
169				section_slider.options = {
170					arrows: enable_loop,
171					clones: enable_loop ? 2 : 0,
172					drag: enable_loop,
173				};
174				// Autoplayコンポーネントはoptions更新を購読していないため、再生/停止はAPIを直接呼ぶ
175				if(enable_loop){
176					section_slider.Components.Autoplay.play();
177				} else {
178					section_slider.Components.Autoplay.pause();
179				}
180			}
181
182		})
183
184		section_slider.mount();
185	})
186
187
188
189
190
191})