모바일 제이쿼리 swiper 에서 마지막 슬라이드 스와이프시에 슬라이드 컨테이너 밖으로 나가고 싶습니다.
본문
<body>
<div id="main">
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
</div>
<div id="contents">
컨텐츠요소
</div>
</body>
<script>
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
pagination: {
el: ".swiper-pagination",
clickable: true,
},
mousewheelReleaseOnEdges: true
});
</script>
<style>
#main{ width: 100%; height: 300vh; }
.swiper-container{ width: 100%; height: 300vh;}
.swiper-slide{ width: 100%; height: 100vh;}
.swiper-slide:nth-child(1){ background-color: red; }
.swiper-slide:nth-child(2){ background-color: blue; }
.swiper-slide:nth-child(3){ background-color: green; }
#contents{ width: 100%; height: 500px; background-color: yellow; }
</style>
swiper.js 를 이용하여 모바일 버전 수직 슬라이드를 만들고 싶습니다.
swiper-slide 1 , 2 , 3 이 모두 풀페이지며
slide가 모두 끝나면 아래 컨텐츠 요소들로 내려가는 형태입니다.
컴퓨터에서 스와이프 + 스크롤을 동시에 이용하면
.swiper-container 밖으로 나오는게 가능하지만
모바일에서 스와이프 기능만으로 테스트시 ,
.swiper-container 의 마지막 슬라이드에서 화면이 더이상 내려가지 않습니다.
이럴때는 어떻게 해결해야할까요?
모바일 제이쿼리 swipe down 등 이용해보았는데 스와이프 효과가 swiper js만큼 깔끔하게 되지 않네요ㅜㅜ
꼭 해결하고 싶습니다. 도와주세요
답변을 작성하시기 전에 로그인 해주세요.