first commit 2

2026-06-11 18:47:38 +09:00
parent c768729ce6
commit 6f534e33a6
11095 changed files with 1595758 additions and 0 deletions
@@ -0,0 +1,78 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const storySliderEl = document.querySelector('.story-slider');
+
+    if (!storySliderEl) {
+        return; // 슬라이더 요소가 없으면 종료
+    }
+
+    /**
+     * 슬라이더 내의 모든 비디오를 찾아 리셋합니다.
+     * @param {HTMLElement} sliderElement - 슬라이더 컨테이너 요소
+     */
+    const resetAllVideos = (sliderElement) => {
+        sliderElement.querySelectorAll('video').forEach(video => {
+            if (!video.paused) {
+                video.pause();
+            }
+            video.currentTime = 0;
+        });
+    };
+
+    /**
+     * 현재 활성화된 슬라이드를 처리하는 함수
+     * @param {object} swiper - Swiper 인스턴스
+     */
+    const handleActiveSlide = (swiper) => {
+        // 다른 모든 비디오를 먼저 리셋
+        resetAllVideos(swiper.el);
+
+        const activeSlide = swiper.slides[swiper.activeIndex];
+        const activeVideo = activeSlide?.querySelector('video');
+
+        if (activeSlide?.dataset?.type === 'video' && activeVideo) {
+            // 활성 슬라이드가 비디오일 경우
+            swiper.autoplay.stop();
+
+            // 브라우저 정책에 의한 재생 실패를 대비한 에러 처리
+            activeVideo.play().catch(error => {
+                console.error("비디오 자동재생이 차단되었습니다:", error);
+                // 재생에 실패하면 멈추지 않도록 다음 슬라이드로 즉시 이동
+                swiper.slideNext();
+            });
+
+            // 비디오가 끝나면 다음 슬라이드로 이동
+            activeVideo.onended = () => {
+                swiper.slideNext();
+            };
+        } else {
+            // 활성 슬라이드가 이미지일 경우
+            swiper.autoplay.start();
+        }
+    };
+
+    const swiper = new Swiper(storySliderEl, {
+        loop: true,
+        effect: 'fade',
+        fadeEffect: {
+            crossFade: true
+        },
+        pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+        },
+        autoplay: {
+            delay: 5000,
+            disableOnInteraction: false,
+        },
+        on: {
+            // 이벤트에서 전달된 swiper 인스턴스 사용
+            slideChange: function (swiper) {
+                handleActiveSlide(swiper);
+            },
+            // 초기화 시 첫 슬라이드를 처리하기 위해 init 이벤트 사용
+            init: function (swiper) {
+                handleActiveSlide(swiper);
+            }
+        }
+    });
+});