hmw1001
92 lines
3.5 KiB
JavaScript
92 lines
3.5 KiB
JavaScript
// 이 스크립트는 main_visual 모듈이 로드될 때 즉시 실행됩니다.
|
|
(function() {
|
|
const storySliderEl = document.querySelector('.story-slider');
|
|
|
|
// 슬라이더 요소가 없거나, 이미 초기화되었다면 중복 실행을 방지합니다.
|
|
if (!storySliderEl || storySliderEl.classList.contains('swiper-initialized')) {
|
|
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) => {
|
|
// 💡 [안정성 강화] swiper 객체가 유효한지 확인 후 진행합니다.
|
|
if (!swiper || !swiper.el) {
|
|
console.error("handleActiveSlide: 유효하지 않은 Swiper 인스턴스입니다.");
|
|
return;
|
|
}
|
|
|
|
// 다른 모든 비디오를 먼저 리셋합니다.
|
|
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();
|
|
}
|
|
};
|
|
|
|
// Swiper 라이브러리가 로드되었는지 확인 후 슬라이더를 초기화합니다.
|
|
if (typeof Swiper !== 'undefined') {
|
|
const swiper = new Swiper(storySliderEl, {
|
|
loop: true,
|
|
effect: 'fade',
|
|
fadeEffect: {
|
|
crossFade: true
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
autoplay: {
|
|
delay: 5000, // 💡 [개선] 비디오 재생을 고려하여 딜레이를 5초로 늘립니다.
|
|
disableOnInteraction: false,
|
|
},
|
|
on: {
|
|
// 💡 [수정] 'this'를 사용하여 Swiper 인스턴스를 안정적으로 전달합니다.
|
|
slideChange: function () {
|
|
handleActiveSlide(this);
|
|
},
|
|
init: function () {
|
|
handleActiveSlide(this);
|
|
}
|
|
}
|
|
});
|
|
// 초기화되었음을 표시하여 중복 실행을 막습니다.
|
|
storySliderEl.classList.add('swiper-initialized');
|
|
} else {
|
|
console.error('Swiper 라이브러리가 로드되지 않았습니다.');
|
|
}
|
|
})(); |