모바일 제이쿼리 swiper 에서 마지막 슬라이드 스와이프시에 슬라이드 컨테이너 밖으로 나가고 싶습니다.

모바일 제이쿼리 swiper 에서 마지막 슬라이드 스와이프시에 슬라이드 컨테이너 밖으로 나가고 싶습니다.

QA

모바일 제이쿼리 swiper 에서 마지막 슬라이드 스와이프시에 슬라이드 컨테이너 밖으로 나가고 싶습니다.

답변 1

본문


 
<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만큼 깔끔하게 되지 않네요ㅜㅜ

꼭 해결하고 싶습니다. 도와주세요

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1,284
© SIRSOFT
현재 페이지 제일 처음으로