swiper 문제 채택완료
sooable
3년 전
조회 2,187
안녕하세요! 스와이퍼슬라이드 안에 동영상이 있고,
동영상이 끝나면 다음 슬라이드가 재생되는 소스를 인터넷에서 찾아서 적용하였는데요.
반응형인데도 불구하고
기본 브라우저 상에는 문제가 없으나 모바일 사이즈, 카톡 인앱 브라우저 등에서는 아래처럼 오류가 뜨며
스와이퍼가 작동하지 않는 문제가 있습니다.
</p>
<p><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();
});</p>
<p>
</script></p>
<p>
다만, 새로고침하면 제대로 불러와지더라구요 ㅠ
그래서 제 생각에는 문서를 불러오고 나서 한 번더 스와이퍼를 업데이트해주면 되지 않을까 생각하는데
지금 코드상에 swiper.update(); 를 써도 문제가 해결되지 않아서 다른 방법이 있거나
혹시 해당 사항에 대해 아시는 분이 있을까 해서 질문 남겨봅니다.
다양한 의견 주시면 감사하겠습니다!
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
s
sooable
3년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
값을 못읽으면 스와이퍼가 아예 안되어버리고 새로고침만 하면 또 되는게 이상해서
코드 위치도 바꿔보고 funtion으로 감싸도 보고..
스와이퍼만 리로드하는 다른 방법을 찾다가 setTimeout으로 문서가 로딩된 뒤에 swiper가 로드되게 했더니 어찌저찌 해결된것 같아요..
오늘도 해결됐지만 문제의 원인을 모르니 반만 해결한 셈이네요 ㅠㅠ
코딩은 정말 할수록 미지의 세계인가봅니다