https://www.kosca.or.kr/front/js/index.js

1$(function(){
2    const noticeSwiper = new Swiper(".notice-swiper .swiper", { 
3        direction: "vertical",
4        centeredSlides: true,
5        navigation: {
6            nextEl: '.notice-swiper .swiper-button-next',
7            prevEl: '.notice-swiper .swiper-button-prev',
8        },
9        loop: true,
10        spaceBetween: 12,
11        slidesPerView: 3,
12        observer: true,
13        autoplay: {
14            delay: 4000, 
15            disableOnInteraction: false 
16        },
17    });
18
19    let isPaused = false;
20
21    $('.swiper-button-pause').on('click', function () {
22        if (isPaused) {
23            noticeSwiper.autoplay.start();
24            $(this).removeClass('paused');
25        } else {
26            noticeSwiper.autoplay.stop();
27            $(this).addClass('paused');
28        }
29        isPaused = !isPaused;
30    });
31
32    new Swiper(".transfer-swiper", { 
33        navigation: {
34            nextEl: '.transfer .swiper-button-next',
35            prevEl: '.transfer .swiper-button-prev',
36        },
37        slidesPerView: 1,
38        spaceBetween: 8,
39        observer: true,
40        breakpoints: {
41            0: { 
42                grid: {
43                    rows: 2,
44                },
45            },
46            768: { 
47                grid: {
48                    rows: 3,
49                },
50            },
51        }
52    });
53
54    // 지도
55    // fetch('/front/img/index/map.svg').then(r => r.text()).then(svg => {
56    //     document.getElementById('map').outerHTML = svg; 
57    // }).catch(console.error);
58
59    $('.map path[data-slide=0], .map .bubble:first-child').addClass('on'); 
60
61    $('.map path[data-slide]').on('click', function(){
62        $(this).addClass('on').siblings().removeClass('on');
63        citySwiper.slideToLoop(+this.dataset.slide); 
64    });
65
66    const citySwiper = new Swiper(".city-swiper", { 
67        navigation: {
68            nextEl: '.city-swiper .swiper-button-next',
69            prevEl: '.city-swiper .swiper-button-prev',
70        },
71        loop: true,
72        observer: true,
73        on: {
74            slideChange: function () {
75                const cur = this.realIndex;
76                document.querySelectorAll('.map path[data-slide]').forEach(el => el.classList.toggle('on', +el.dataset.slide === cur));
77                document.querySelectorAll('.map .bubble').forEach((b, i) => b.classList.toggle('on', i === cur));
78            },
79        },
80    });
81
82    new Swiper(".work-swiper", { 
83        navigation: {
84            nextEl: '.work-swiper .swiper-button-next',
85            prevEl: '.work-swiper .swiper-button-prev',
86        },
87        loop: true,
88        observer: true,
89    });
90
91    new Swiper(".promotion .swiper", { 
92        navigation: {
93            nextEl: '.promotion .swiper-button-next',
94            prevEl: '.promotion .swiper-button-prev',
95        },
96        observer: true,
97        simulateTouch: false,
98    });
99
100    // 버튼스와이퍼
101    const buttonWrappers = document.querySelectorAll('.swiper-buttons');
102
103    buttonWrappers.forEach(wrapper => {
104        const buttons = wrapper.querySelectorAll('button');
105        const swiperSelector = wrapper.getAttribute('data-swiper');
106        const swiperEl = document.querySelector(swiperSelector);
107
108        if (!swiperEl || !swiperEl.swiper) return;
109        const swiper = swiperEl.swiper;
110
111        const dropdownBtn = wrapper.closest('.dropdown').querySelector('.dropdown-button');
112
113        function updateButtons(activeIdx) {
114            buttons.forEach((b, i) => b.classList.toggle('active', i === activeIdx));
115            if (dropdownBtn) {
116                dropdownBtn.textContent = buttons[activeIdx].textContent;
117            }
118        }
119
120        buttons.forEach((btn, index) => {
121            btn.addEventListener('click', () => {
122                swiper.slideToLoop(index);
123                updateButtons(index);
124            });
125        });
126
127        swiper.on('slideChange', () => {
128            updateButtons(swiper.realIndex);
129        });
130
131        updateButtons(swiper.realIndex);
132    });
133
134
135    const companySwiper = new Swiper('.company-swiper', {
136        navigation: {
137            nextEl: '.main-member-company .swiper-button-next',
138            prevEl: '.main-member-company .swiper-button-prev'
139        },
140        breakpoints: {
141            0: { 
142                slidesPerView: 1,
143                grid: {
144                    rows: 2,
145                },
146                spaceBetween: 12,
147            },
148            557: { 
149                slidesPerView: 2,
150                grid: {
151                    rows: 2,
152                },
153                spaceBetween: 12,
154            },
155            992: { 
156                slidesPerView: 3,
157                grid: {
158                    rows: 2,
159                },
160                spaceBetween: 24,
161            },
162            1600:{ 
163                slidesPerView: 4,
164                grid: {
165                    rows: 2,
166                },
167                spaceBetween: 24,
168            }
169        }
170    });
171
172    // 하단
173    const marquee = document.querySelector('.marquee');
174
175    if(marquee){
176        const items = marquee.querySelectorAll('li');
177

178        items.forEach(item => {
179            const clone = item.cloneNode(true);
180            marquee.appendChild(clone);
181        });
182    }
183
184    // 비디오 메타데이터 로드 시 개별 슬라이드 설정
185    $('.main-top video').each(function(){
186        $(this).on('loadedmetadata', function() {
187            var slide = $(this).closest('.swiper-slide');
188            slide.attr('data-swiper-autoplay', this.duration * 1000);
189        });
190    });
191
192    function setAutoplayDelayByActive(swiper) {
193        const $active = $(swiper.slides[swiper.activeIndex]);
194        const vid = $active.find('video:visible').get(0);
195
196        const delay = (vid && isFinite(vid.duration) && !isNaN(vid.duration) && vid.duration > 0)
197            ? Math.max(1000, Math.round(vid.duration * 1000))
198            : 5000; 
199
200        swiper.params.autoplay.delay = delay; 
201        if (swiper.autoplay && swiper.autoplay.running) swiper.autoplay.stop();
202        swiper.autoplay.start();
203    }
204
205    function bindActiveVideoHandlers(swiper) {
206        document.querySelectorAll('.main-top video').forEach(v => {
207            v.onended = null;
208        });
209
210        const $active = $(swiper.slides[swiper.activeIndex]);
211        const vid = $active.find('video:visible').get(0);
212        if (vid) {
213            vid.onended = function () {
214                if (swiper.params.loop) {
215                    swiper.slideNext(); 
216                } else {
217                    if (swiper.isEnd) {
218                        swiper.autoplay && swiper.autoplay.stop();
219                    } else {
220                        swiper.slideNext();
221                    }
222                }
223            };
224        }
225    }
226
227    const isLoop = $('.main-top .swiper-slide').length > 1;
228    
229    // 메인 비주얼 슬라이드
230    var visualSwiper = new Swiper(".main-top-visual", {
231        loop: isLoop,
232        loopAdditionalSlides: 3,
233        speed: 1500,
234        effect: 'fade',
235        autoplay: {
236            delay: 5000, 
237            disableOnInteraction: false
238        },
239        on: {
240            init(swiper){
241                if (!isLoop) swiper.autoplay.stop();
242
243                const $video = $('.main-top .swiper-slide-active').find('video:visible');
244                if ($video.length) $video[0].play();
245
246                setAutoplayDelayByActive(swiper);
247                bindActiveVideoHandlers(swiper);
248            },
249            slideChangeTransitionStart(swiper){
250                $('.main-top .swiper-slide').removeClass('init');
251                document.querySelectorAll('.main-top video').forEach(function (video) {
252                    video.pause();
253                });
254            },
255            slideChangeTransitionEnd(swiper){
256                const $video = $('.main-top .swiper-slide-active').find('video:visible');
257                if ($video.length) {
258                    const el = $video[0];
259
260                    if (isNaN(el.duration) || !isFinite(el.duration) || el.duration === 0) {
261                        const once = () => {
262                            setAutoplayDelayByActive(swiper);
263                            el.removeEventListener('loadedmetadata', once);
264                        };
265                        el.addEventListener('loadedmetadata', once, { once: true });
266                    } else {
267                        setAutoplayDelayByActive(swiper);
268                    }
269                    el.play();
270                } else {
271                    // 비디오 없는 슬라이드는 폴백 5초
272                    swiper.params.autoplay.delay = 5000;
273                    if (swiper.autoplay.running) swiper.autoplay.stop();
274                    swiper.autoplay.start();
275                }
276
277                bindActiveVideoHandlers(swiper);
278            }
279        }
280    });
281
282    let isFirstMeasure = true;
283
284    document.querySelectorAll(".popup-swiper").forEach((el) => {
285        const swiper = new Swiper(el, {
286            autoHeight: true,
287            spaceBetween: 0,
288            navigation: {
289                nextEl: el.closest(".popup").querySelector(".swiper-button-next"),
290                prevEl: el.closest(".popup").querySelector(".swiper-button-prev"),
291            },

292            speed: 800,
293            autoplay: {
294                delay: 5000, 
295                disableOnInteraction: false 
296            },
297            pagination: {
298                el: el.closest(".popup").querySelector(".swiper-pagination"),
299                type: "fraction",
300            },
301            on: {
302                init() {
303                    safeUpdateWidth(this);
304                },
305                slideChange() {
306                    safeUpdateWidth(this);
307                },
308            },
309        });
310
311        // 팝업이 display:none이었다가 보일 때 정확히 재계산
312        function safeUpdateWidth(swiperInstance) {
313            // 한 프레임 뒤에 계산하면 레이아웃이 안정화된 상태에서 측정 가능
314            requestAnimationFrame(() => updateToImageWidth(swiperInstance));
315        }
316
317        function updateToImageWidth(swiperInstance) {
318            const slide = swiperInstance.slides[swiperInstance.activeIndex];
319            if (!slide) return;
320            const img = slide.querySelector("img");
321            if (!img) return;
322
323            const apply = () => {
324                const w = img.getBoundingClientRect().width;
325                swiperInstance.el.style.width = Math.round(w) + "px";
326                swiperInstance.updateAutoHeight(200);
327
328                if (isFirstMeasure) {
329                    swiperInstance.el.classList.remove("hidden");
330                    isFirstMeasure = false;
331                }
332            };
333
334            if (!img.complete || img.naturalWidth === 0) {
335                img.onload = apply;
336            } else {
337                apply();
338            }
339        }
340
341        // 리사이즈 시 즉시 재계산 
342        window.addEventListener("resize", () => safeUpdateWidth(swiper));
343
344        // 팝업이 열릴 때 외부에서 호출할 수 있도록 공개(선택)
345        el.updateSwiperWidthToImage = () => safeUpdateWidth(swiper);
346    });
347
348    $('.pop-close').on('click', function(){
349		$(this).closest('.popup').hide();
350	});
351
352    // 메인전환
353    new Swiper(".news-swiper", { 
354        navigation: {
355            nextEl: '.main-sect-news .swiper-button-next',
356            prevEl: '.main-sect-news .swiper-button-prev',
357        },
358        observer: true,
359        breakpoints: {
360            0: { 
361                slidesPerView: 2,
362                spaceBetween: 6,
363            },
364            557: { 
365                slidesPerView: 3,
366                spaceBetween: 12,
367            },
368            992: { 
369                slidesPerView: 4,
370                spaceBetween: 24,
371            },
372            1200:{ 
373                slidesPerView: 5,
374                spaceBetween: 24,
375            },
376            1600:{ 
377                slidesPerView: 5,
378                spaceBetween: 36,
379            }
380        }
381    });
382
383    new Swiper(".issue-swiper", { 
384        navigation: {
385            nextEl: '.main-sect-issue .swiper-button-next',
386            prevEl: '.main-sect-issue .swiper-button-prev',
387        },
388        observer: true,
389        breakpoints: {
390            0: { 
391                slidesPerView: 2,
392                spaceBetween: 6,
393            },
394            557: { 
395                slidesPerView: 3,
396                spaceBetween: 12,
397            },
398            992: { 
399                slidesPerView: 4,
400                spaceBetween: 24,
401            },
402            1200:{ 
403                slidesPerView: 5,
404                spaceBetween: 24,
405            },
406            1600:{ 
407                slidesPerView: 5,
408                spaceBetween: 36,
409            }
410        }
411    });
412
413    new Swiper(".brief-swiper", { 
414        navigation: {
415            nextEl: '.swiper-button-next',
416            prevEl: '.swiper-button-prev',
417        },
418        observer: true,
419        slidesPerView: 2,
420        spaceBetween: 6,
421        breakpoints: {
422            0: { 
423                slidesPerView: 1,
424                spaceBetween: 6,
425            },
426            557: { 
427                slidesPerView: 2,
428                spaceBetween: 6,
429            },
430            768: { 
431                slidesPerView: 3,
432                spaceBetween: 6,
433            },
434            1200:{ 
435                slidesPerView: 4,
436                spaceBetween: 12,
437            },
438            1600:{ 
439                slidesPerView: 4,
440                spaceBetween: 24,
441            }
442        }
443    });
444});