hmw1001
79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
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);
|
|
}
|
|
}
|
|
});
|
|
});
|