https://www.gtc.co.kr/resources/templates/front/assets/js/landing3.js

1let mainUi = {};
2$(function () {
3	mainUi.init();
4
5});
6mainUi.init = function () {
7	mainUi.ui();
8}
9
10mainUi.ui = function () {
11
12	$(".main2").each(function (index) {
13		let $this = $(this);
14		let swiper = undefined;
15		let slideNum = $this.find('.swiper-slide').length; // 슬라이드 총 개수
16		let slideInx = 0; // 현재 슬라이드 index
17		let classNum = $(this).index() + 1;
18
19		// 디바이스 체크
20		let oldWChk = window.innerWidth > 768 ? 'pc' : 'mo';
21		sliderAct();
22		$(window).on('resize', function () {
23			let newWChk = window.innerWidth > 768 ? 'pc' : 'mo';
24			if (newWChk != oldWChk) {
25				oldWChk = newWChk;
26				sliderAct();
27			}
28		});
29
30		function sliderAct() {
31			// 슬라이드 인덱스 클래스 추가
32			$this.find(".swiper").addClass("slider" + classNum);
33
34			// 슬라이드 초기화
35			if (swiper != undefined) {
36				swiper.destroy(); // destroy 함수가 주석 처리되어 있던 부분 수정
37				swiper = undefined;
38			}
39
40			// slidesPerView 옵션 설정
41			let viewNum = 0;
42			let Group = 0;
43
44			if (window.innerWidth <= 1399) {
45				viewNum = 3;
46			} else if (window.innerWidth <= 1023) {
47				viewNum = 1;
48			} else {
49				viewNum = 4;
50			}
51
52			if (slideNum > viewNum) {
53				Group = 1;
54			} else {
55				Group = slideNum; // Group 값을 슬라이드 개수로 설정
56			}
57
58			// loop 옵션 체크
59			let loopChk = slideNum > viewNum;
60
61			swiper = new Swiper(".main2 .slider" + classNum + " .wrap", {
62				autoplay: false,
63				slidesPerView: viewNum, // slidesPerView를 설정
64				initialSlide: slideInx,
65				spaceBetween: 20,
66				loop: true, // loop 설정 확인
67				navigation: {
68					nextEl: ".main2 .btn_wrap" + " .next",
69					prevEl: ".main2 .btn_wrap" + " .prev",
70				},
71				pagination: {
72					el: ".main2 .btn_wrap .paging",
73					clickable: true,
74					type: 'bullets', // pagination 타입을 'bullets'로 설정
75				},
76				breakpoints: {
77					1200: {
78						slidesPerView: 3,
79						spaceBetween: 40,
80					},
81					801: {
82						slidesPerView: 2,
83						spaceBetween: 20,
84					},
85					601: {
86						slidesPerView: 2,
87						spaceBetween: 20,
88					},
89					101: {
90						slidesPerView: 1,
91						spaceBetween: 20,
92					},
93				},
94				a11y: {
95					enabled: true,
96					prevSlideMessage: '이전 슬라이드',
97					nextSlideMessage: '다음 슬라이드',
98					slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
99				},
100			});
101		}
102	});
103	$(".main3").each(function (index) {
104		let $this = $(this);
105		let swiper = undefined;
106		let slideNum = $this.find('.swiper-slide').length; // 슬라이드 총 개수
107		let slideInx = 0; // 현재 슬라이드 index
108		let classNum = $(this).index() + 1;
109
110		// 디바이스 체크
111		let oldWChk = window.innerWidth > 768 ? 'pc' : 'mo';
112		sliderAct();
113		$(window).on('resize', function () {
114			let newWChk = window.innerWidth > 768 ? 'pc' : 'mo';
115			if (newWChk != oldWChk) {
116				oldWChk = newWChk;
117				sliderAct();
118			}
119		});
120
121		function sliderAct() {
122			// 슬라이드 인덱스 클래스 추가
123			$this.find(".swiper").addClass("slider" + classNum);
124
125			// 슬라이드 초기화
126			if (swiper != undefined) {
127				swiper.destroy(); // destroy 함수가 주석 처리되어 있던 부분 수정
128				swiper = undefined;
129			}
130
131			// slidesPerView 옵션 설정
132			let viewNum = 0;
133			let Group = 0;
134
135			if (window.innerWidth <= 1399) {
136				viewNum = 3;
137			} else if (window.innerWidth <= 1023) {
138				viewNum = 1;
139			} else {
140				viewNum = 4;
141			}
142
143			if (slideNum > viewNum) {
144				Group = 1;
145			} else {
146				Group = slideNum; // Group 값을 슬라이드 개수로 설정
147			}
148
149			// loop 옵션 체크
150			let loopChk = slideNum > viewNum;
151
152			swiper = new Swiper(".main3 .slider" + classNum + " .wrap", {
153				autoplay: false,
154				slidesPerView: viewNum, // slidesPerView를 설정
155				initialSlide: slideInx,
156				spaceBetween: 20,
157				loop: true, // loop 설정 확인
158				navigation: {
159					nextEl: ".main3 .btn_wrap" + " .next",
160					prevEl: ".main3 .btn_wrap" + " .prev",
161				},
162				pagination: {
163					el: ".main3 .btn_wrap .paging",
164					clickable: true,
165					type: 'bullets', // pagination 타입을 'bullets'로 설정
166				},
167				breakpoints: {
168					1200: {
169						slidesPerView: 3,
170						spaceBetween: 40,
171					},
172					801: {
173						slidesPerView: 2,
174						spaceBetween: 20,
175					},
176					601: {
177						slidesPerView: 2,
178						spaceBetween: 20,
179					},
180					101: {
181						slidesPerView: 1,
182						spaceBetween: 20,
183					},
184				},
185				a11y: {
186					enabled: true,
187					prevSlideMessage: '이전 슬라이드',
188					nextSlideMessage: '다음 슬라이드',
189					slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
190				},
191			});
192		}
193	});
194	$(".main4").each(function (index) {

195		let $this = $(this);
196		let swiper = undefined;
197		let slideNum = $this.find('.swiper-slide').length; // 슬라이드 총 개수
198		let slideInx = 0; // 현재 슬라이드 index
199		let classNum = $(this).index() + 1;
200
201		// 디바이스 체크
202		let oldWChk = window.innerWidth > 768 ? 'pc' : 'mo';
203		sliderAct();
204		$(window).on('resize', function () {
205			let newWChk = window.innerWidth > 768 ? 'pc' : 'mo';
206			if (newWChk != oldWChk) {
207				oldWChk = newWChk;
208				sliderAct();
209			}
210		});
211
212		function sliderAct() {
213			// 슬라이드 인덱스 클래스 추가
214			$this.find(".swiper").addClass("slider" + classNum);
215
216			// 슬라이드 초기화
217			if (swiper != undefined) {
218				swiper.destroy(); // destroy 함수가 주석 처리되어 있던 부분 수정
219				swiper = undefined;
220			}
221
222			// slidesPerView 옵션 설정
223			let viewNum = 0;
224			let Group = 0;
225
226			if (window.innerWidth <= 1399) {
227				viewNum = 3;
228			} else if (window.innerWidth <= 1023) {
229				viewNum = 1;
230			} else {
231				viewNum = 4;
232			}
233
234			if (slideNum > viewNum) {
235				Group = 1;
236			} else {
237				Group = slideNum; // Group 값을 슬라이드 개수로 설정
238			}
239
240			// loop 옵션 체크
241			let loopChk = slideNum > viewNum;
242
243			swiper = new Swiper(".main4 .slider" + classNum + " .wrap", {
244				autoplay: false,
245				slidesPerView: viewNum, // slidesPerView를 설정
246				initialSlide: slideInx,
247				spaceBetween: 20,
248				loop: true, // loop 설정 확인
249				navigation: {
250					nextEl: ".main4 .btn_wrap" + " .next",
251					prevEl: ".main4 .btn_wrap" + " .prev",
252				},
253				pagination: {
254					el: ".main4 .btn_wrap .paging",
255					clickable: true,
256					type: 'bullets', // pagination 타입을 'bullets'로 설정
257				},
258				breakpoints: {
259					1200: {
260						slidesPerView: 3,
261						spaceBetween: 40,
262					},
263					801: {
264						slidesPerView: 2,
265						spaceBetween: 20,
266					},
267					601: {
268						slidesPerView: 2,
269						spaceBetween: 20,
270					},
271					101: {
272						slidesPerView: 1,
273						spaceBetween: 20,
274					},
275				},
276				a11y: {
277					enabled: true,
278					prevSlideMessage: '이전 슬라이드',
279					nextSlideMessage: '다음 슬라이드',
280					slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
281				},
282			});
283		}
284	});
285	$(".main5").each(function (index) {
286		let $this = $(this);
287		let swiper = undefined;
288		let slideNum = $this.find('.swiper-slide').length; // 슬라이드 총 개수
289		let slideInx = 0; // 현재 슬라이드 index
290		let classNum = $(this).index() + 1;
291
292		// 디바이스 체크
293		let oldWChk = window.innerWidth > 768 ? 'pc' : 'mo';
294		sliderAct();
295		$(window).on('resize', function () {
296			let newWChk = window.innerWidth > 768 ? 'pc' : 'mo';
297			if (newWChk != oldWChk) {
298				oldWChk = newWChk;
299				sliderAct();
300			}
301		});
302
303		function sliderAct() {
304			// 슬라이드 인덱스 클래스 추가
305			$this.find(".swiper").addClass("slider" + classNum);
306
307			// 슬라이드 초기화
308			if (swiper != undefined) {
309				swiper.destroy(); // destroy 함수가 주석 처리되어 있던 부분 수정
310				swiper = undefined;
311			}
312
313			// slidesPerView 옵션 설정
314			let viewNum = 0;
315			let Group = 0;
316
317			if (window.innerWidth <= 1399) {
318				viewNum = 3;
319			} else if (window.innerWidth <= 1023) {
320				viewNum = 1;
321			} else {
322				viewNum = 4;
323			}
324
325			if (slideNum > viewNum) {
326				Group = 1;
327			} else {
328				Group = slideNum; // Group 값을 슬라이드 개수로 설정
329			}
330
331			// loop 옵션 체크
332			let loopChk = slideNum > viewNum;
333
334			swiper = new Swiper(".main5 .slider" + classNum + " .wrap", {
335				autoplay: false,
336				slidesPerView: viewNum, // slidesPerView를 설정
337				initialSlide: slideInx,
338				spaceBetween: 20,
339				loop: true, // loop 설정 확인
340				navigation: {
341					nextEl: ".main5 .btn_wrap" + " .next",
342					prevEl: ".main5 .btn_wrap" + " .prev",
343				},
344				pagination: {
345					el: ".main5 .btn_wrap .paging",
346					clickable: true,
347					type: 'bullets', // pagination 타입을 'bullets'로 설정
348				},
349				breakpoints: {
350					1200: {
351						slidesPerView: 3,
352						spaceBetween: 40,
353					},
354					801: {
355						slidesPerView: 2,
356						spaceBetween: 20,
357					},
358					601: {
359						slidesPerView: 2,
360						spaceBetween: 20,
361					},
362					101: {
363						slidesPerView: 1,
364						spaceBetween: 20,
365					},
366				},
367				a11y: {
368					enabled: true,
369					prevSlideMessage: '이전 슬라이드',
370					nextSlideMessage: '다음 슬라이드',
371					slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
372				},
373			});
374		}
375	});
376
377}
378
379$(function () {
380	$('.click_item .item a').on('click', function (e) {
381		e.preventDefault(); // 기본 링크 동작 방지
382
383		var target = $(this).attr('href'); // 클릭한 링크의 href 값(이동할 위치)
384
385		// 해당 위치로 부드럽게 스크롤
386		$('html, body').animate({
387			scrollTop: $(target).offset().top
388		}, 500); // 1000ms(1초) 동안 스크롤
389	});
390})
391document.addEventListener("DOMContentLoaded", function () {
392	const applyAnimations = () => {
393		const isMobile = window.matchMedia("(max-width: 768px)").matches; // 모바일 확인
394		const pcImages = document.querySelectorAll(".ani.w800n"); // PC용 이미지
395		const mobileImages = document.querySelectorAll(".ani.w800v"); // 모바일용 이미지
396		const descElement = document.querySelector(".desc"); // desc 요소
397		const clickElement = document.querySelector(".click_item"); // click 요소
398
399		// 적절한 이미지 그룹 선택
400		const images = isMobile ? mobileImages : pcImages;
401
402		// 애니메이션 적용

403		images.forEach((image, index) => {
404			if (!image.classList.contains("animate")) { // animate 클래스가 없을 때만 추가
405				setTimeout(() => {
406					image.classList.add("animate");
407				}, index * 500);
408			}
409		});
410
411		// desc와 click_item 애니메이션 적용
412		if (descElement && !descElement.classList.contains("animate")) {
413			setTimeout(() => {
414				descElement.classList.add("animate");
415				clickElement.classList.add("animate");
416			}, images.length * 500);
417		}
418	};
419
420	// 초기 애니메이션 실행
421	applyAnimations();
422
423	// 리사이즈 이벤트
424	let resizeTimeout;
425	window.addEventListener("resize", () => {
426		clearTimeout(resizeTimeout);
427		resizeTimeout = setTimeout(() => {
428			applyAnimations();
429		}, 300); // 300ms 대기 후 실행
430	});
431});