[JavaScript] Swiper 마지막 슬라이드에서 페이지 스크롤

22-07-21 수정

기존 코드보다 더 좋은 코드를 작성했습니다.

마지막 슬라이드 뿐만 아니라 첫번째 슬라이드에서 위로 스크롤도 되고, 모바일에서 스냅도 적용됩니다.

스크롤을 막는 것은 releaseOnEdge 파라미터를 사용했고 터치를 막는 것은 touchReleaseOnEdges 파라미터를 사용했습니다.

 

See the Pen Swiper snap & scroll when last slide - new by lpla (@lpla) on CodePen.

 

 

 

마땅한 문장이 떠오르지 않아서 '마지막 슬라이드에서 페이지 스크롤' 이라고 적어놨지만, '마지막 슬라이드에서 마우스 휠 이벤트 제어'가 가장 정확하고 'Swiper 마우스 휠 기능 정지' 도 나쁘지 않은 문장 같다.

 

최종 결과물

Swiper로 세로 스크롤(Vertical Scroll) 기능을 쉽게 구현할 수 있다.

 

<div class="section_1">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide01">
      </div>
      <div class="swiper-slide slide02">
      </div>
      <div class="swiper-slide slide03">
      </div>
      <div class="swiper-slide slide04">
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</div>
<script>
  var swiper = new Swiper('.swiper-container', {
    speed: 500,
    direction: 'vertical',
    mousewheel: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  });
</script>

body {height: 400vh; background: #222;}
.swiper-container {height: 500px;}
.slide01 {width: 100%; height: 100%; background: red;}
.slide02 {width: 100%; height: 100%; background: blue;}
.slide03 {width: 100%; height: 100%; background: yellow;}
.slide04 {width: 100%; height: 100%; background: pink;}

 

이것이 Swiper로 만들 수 있는 가장 기본적인 세로 스크롤 슬라이드 형태다.

하지만 이 형태는 마지막 슬라이드에서 아래 마우스 휠을 하더라도 화면이 내려가지 않는다.

loop: true 를 해도 첫번째 슬라이드로 되돌아갈 뿐, 화면 자체를 스크롤하기 위해서는 슬라이드 바깥으로 마우스 커서를 옮겨야 가능하다.

이는 상황에 따라 유용할 수 있지만 우리는 또 어떠한 경우에는 마지막 슬라이드에서 다시 마우스 휠을 한다면, 화면이 스크롤되길 원할 수 있다.

나 역시 그랬고 방대한 Swiper API 를 살펴보며 원하는 기능을 구현하는데 성공했다.

 

<div class="section_1">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide01">
      </div>
      <div class="swiper-slide slide02">
      </div>
      <div class="swiper-slide slide03">
      </div>
      <div class="swiper-slide slide04">
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</div>
<script>
  var swiper = new Swiper('.swiper-container', {
    speed: 500,
    direction: 'vertical',
    mousewheel: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    on: {
      reachEnd: function () {
        swiper.mousewheel.disable();
      }
    }
  });
  window.addEventListener('wheel', function (event) {
    if (event.deltaY < 0) {
      swiper.mousewheel.enable();
    } else if (event.deltaY > 0) {
    }
  });
</script>

 

on: 은 swiper에 이벤트를 할당하는 메서드이다.

그리고 reachEnd 는 마지막 슬라이드에 도달할 때 이벤트를 실행하는 것

swiper.mousewheel.disable(); 은 swiper의 mousewheel 기능을 비활성화하는 것이다.

즉 이것만으로 마지막 슬라이드에 도달하면 마우스 휠 기능을 비활성화하는 이벤트를 만들 수 있다.

 

하지만 여기서 끝내면 한 번 정지된 마우스 휠 이벤트를 다시 사용할 수 없다.

위쪽 마우스 휠을 했을 때 다시 휠 기능을 활성화해야 하는데 앞서 마우스휠 기능이 비활성화되어 버렸기 때문에 '위쪽 마우스휠을 한다면' 이라는 이벤트를 만들 수 없다.

따라서 자바스크립트 addEventListener 로 wheel 이벤트를 감지하고

event.deltaY 가 음수 즉 위쪽 스크롤일 때, 마우스 휠 기능을 활성화하면 된다.

 

 

2021-11-06 codepen 추가

See the Pen Swiper 마지막 슬라이드에서 페이지 스크롤 by lpla (@lpla) on CodePen.