Swiper 예제 - 첫번째 슬라이드에서 prev 기능 막기

1. 기본 구조

<section class="swiper-section">
  <div class="swiper-container mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide01"><p>1</p></div>
      <div class="swiper-slide slide02"><p>2</p></div>
      <div class="swiper-slide slide03"><p>3</p></div>
      <div class="swiper-slide slide04"><p>4</p></div>
      <div class="swiper-slide slide05"><p>5</p></div>
      <div class="swiper-slide slide06"><p>6</p></div>
      <div class="swiper-slide slide07"><p>7</p></div>
    </div>
  </div>
  <div class="swiper-navigation">
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</section>

<script>
  const swiper = new Swiper('.swiper-container', {
      // loop: true,
      spaceBetween: 10,
      slidesPerView: 3,
      slideToClickedSlide: true,
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
  });
</script>

 

Swiper에서 loop 기능을 사용하지 않으면 첫번째 슬라이드에서 prev 버튼이 자동적으로 비활성화된다.

 

마찬가지로 마지막 슬라이드에서 next 버튼도 비활성화된다.

 

한편 loop 기능을 사용하게 되면 첫번째 슬라이드에도 이전 슬라이드가 존재하고, 마지막 슬라이드 다음에도 슬라이드가 존재하기 때문에 버튼이 항상 활성화되어 있다.

말 그대로 루프(반복)니까 당연한 현상이다.

 

그런데 사용자에 따라서 loop 기능을 사용하되 첫번째 슬라이드에서 prev 버튼을 비활성화하고 싶을 수 있다.

첫번째 슬라이드에서 마지막 슬라이드로 되돌아가는 것이 마음에 들지 않을 수도 있으니까.

 

이제 해결 방법에 대해 알아보자.

 

 

2. reachBeginning, reachEnd

Swiper에는 첫번째 슬라이드와 마지막 슬라이드를 구분할 수 있는 파라미터가 존재한다.

reachBeginning과 reachEnd다.

Swiper API

 

참고로 reachEnd를 사용하여 예전에 작성한 글이 있으니 읽어보면 좋지만, 이번 주제와는 관련이 없다.

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

loop 기능을 사용하면 이 파라미터들은 무용지물이 된다.

위에서 말했듯이 처음과 마지막 슬라이드라는 개념이 사라지기 때문이다.

결국 이 파라미터로 문제를 해결할 수 없다.

 

 

3. allowSlidePrev

대신에 우리는 allowSlidePrev 파라미터를 사용해야 한다.

Swiper API

 

기본값은 true로 설정되어 있고, 첫번째 슬라이드에서 false로 바꿔주면 된다.

그렇다면 남은 문제는 첫번째 슬라이드에서이다.

이것 역시 예전에 작성한 글에 이미 해답이 있기 때문에 여기서는 자세히 설명하지 않겠다.

Swiper 예제 - 슬라이드가 넘어갈 때 이벤트 호출

 

즉 swiper.realIndex == 0 이 바로 첫번째 슬라이드이고 activeIndexChange가 슬라이드 변화를 감지하는 이벤트다.

See the Pen Swiper - 첫번째 슬라이드 prev 막기 by lpla (@lpla) on CodePen.

이것으로 첫번째 슬라이드에서 prev 기능이 비활성화된다.

 

그런데 여기에는 큰 오류가 하나 있다.

우리는 첫번째 슬라이드에서 prev 기능이 비활성화되는 이벤트를 생성했다.

그래서 slidesPerView 가 2개 이상일 때 터치(드래그)하여 첫번째 슬라이드를 건너뛰는 것이 가능하다.

첫번째 슬라이드에서 라는 조건에 부합하지 않기 때문에 prev 기능이 비활성화되지 않는 것이다.

 

이 오류를 해결하기 위해서는 slidesPerView 값을 항상 1로 하거나, allowTouchMove를 false로 하여 터치 기능을 비활성화하는 방법이 있다.

나아가 슬라이드 위치를 감지하여 특정 위치를 넘어가면 첫번째 슬라이드로 이동하는 방법도 있겠지만 여기선 넘어 가도록 하고 요청이 있으면 추가로 포스팅하겠다.

 

 

4. swiper-button-disabled

allowSlidePrev 말고 다른 방법으로도 문제를 해결할 수 있다.

바로 prev 버튼에 swiper-button-disabled 이라는 클래스를 추가하는 방법이다.

이 방법은 말 그대로 클래스만 추가하는 방법이라서 prev 기능 자체는 여전히 남아 있다.

하지만 css의 pointer-events: none; 으로 클릭 이벤트를 감지하지 못하도록 하는 것이다.

 

See the Pen Swiper - 첫번째 슬라이드 prev 한 번만 막기 - 또 다른 방법 by lpla (@lpla) on CodePen.