swiper 문제
본문
안녕하세요! 스와이퍼슬라이드 안에 동영상이 있고,
동영상이 끝나면 다음 슬라이드가 재생되는 소스를 인터넷에서 찾아서 적용하였는데요.
반응형인데도 불구하고
기본 브라우저 상에는 문제가 없으나 모바일 사이즈, 카톡 인앱 브라우저 등에서는 아래처럼 오류가 뜨며
스와이퍼가 작동하지 않는 문제가 있습니다.
<script>
$(function(){
var swiper = new Swiper(".video_swiper", {
init: false,
initialSlide: 0,
loop: true,
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
observer: true,
observeParents: true,
});
var control = function () {
var slide = swiper.slides[swiper.activeIndex];
var video = slide.children[0];
video.addEventListener("ended", function () {
swiper.slideNext();
});
video.currentTime = 0;
video.play();
};
swiper.on("init", control);
swiper.on("slideChange", control);
swiper.init();
});
</script>
다만, 새로고침하면 제대로 불러와지더라구요 ㅠ
그래서 제 생각에는 문서를 불러오고 나서 한 번더 스와이퍼를 업데이트해주면 되지 않을까 생각하는데
지금 코드상에 swiper.update(); 를 써도 문제가 해결되지 않아서 다른 방법이 있거나
혹시 해당 사항에 대해 아시는 분이 있을까 해서 질문 남겨봅니다.
다양한 의견 주시면 감사하겠습니다!
답변 2
해당 라이브러리 옵션중에 리로드 옵션이 있을거에요.
보통 swiper.update();나 observe: true; 옵션 많이 얘기해주셨는데 아무것도 듣질 않더라구요 ㅠ
값을 못읽으면 스와이퍼가 아예 안되어버리고 새로고침만 하면 또 되는게 이상해서
코드 위치도 바꿔보고 funtion으로 감싸도 보고..
스와이퍼만 리로드하는 다른 방법을 찾다가 setTimeout으로 문서가 로딩된 뒤에 swiper가 로드되게 했더니 어찌저찌 해결된것 같아요..
오늘도 해결됐지만 문제의 원인을 모르니 반만 해결한 셈이네요 ㅠㅠ
코딩은 정말 할수록 미지의 세계인가봅니다
참고로 말씀드리자면 onload 시 해당 객체의 위치를 기억했다가 play 되는 경우가 있는데
모바일에서 문제라면 모바일 전용 라이브러리나 스크립트와 충돌 되는경우도 있습니다.
그럴수도 있겠네요 ㅠ 모바일과 카톡에서 문제가 생기는데
카톡인앱같은경우는 검사창도 볼 수 없고 참 답답하더라고요 ㅠ.. 알려주셔서 감사합니다!
