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

SubinPark 4년 전 조회 6,042

</p>

<p> </p>

<p><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></p>

<p></body></p>

<p> </p>

<p> </p>

<p><script>

        var swiper = new Swiper(".mySwiper", {

        direction: "vertical",

        pagination: {

          el: ".swiper-pagination",

          clickable: true,

        },

        mousewheelReleaseOnEdges: true

    });

    </script></p>

<p> </p>

<p><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; }

            </p>

<p></style></p>

<p> </p>

<p>

swiper.js 를 이용하여 모바일 버전 수직 슬라이드를 만들고 싶습니다.

swiper-slide 1 , 2 , 3 이 모두 풀페이지며

slide가 모두 끝나면 아래 컨텐츠 요소들로 내려가는 형태입니다.

컴퓨터에서 스와이프 + 스크롤을 동시에 이용하면

.swiper-container 밖으로 나오는게 가능하지만

모바일에서 스와이프 기능만으로 테스트시 ,

.swiper-container 의 마지막 슬라이드에서 화면이 더이상 내려가지 않습니다.

이럴때는 어떻게 해결해야할까요?

모바일 제이쿼리 swipe down 등 이용해보았는데 스와이프 효과가 swiper js만큼 깔끔하게 되지 않네요ㅜㅜ

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

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

답변 1개

공유하기