Swiper 예제 - 특정 해상도에서만 사용하기 (반응형)

1. breakpoints?

swiper는 breakpoints로 반응형을 지원한다.

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  
  breakpoints: {
    // 1280px 보다 클 경우
    1280: {
      slidesPerView: 2,
      spaceBetween: 20
    }
  }
});

breakpoints는 반응형에 따라 swiper 효과를 다르게 주고 싶을 때 유용하다.

하지만 swiper 기능 자체를 호출(실행)/제거하려면 breakpoints로 해결할 수 없다.

 

가령 pc 해상도에서만 사용하고 모바일 해상도에서는 사용하지 않으려면 가장 단순무식한 방법은 display: none; 으로 pc에서 보여줄 요소, 모바일에서 보여줄 요소를 따로 만들어서 구분하면 된다.

하지만 동일한 요소를 두 개 만드는 건 좋은 방법이 아니다.

 

1280px을 기준으로 이상일 경우 swiper를 호출하지 않고 미만일 경우 호출하는 예시를 들어 설명해보겠다.

 

 

이 문제를 해결하기 위한 단서는 2가지다.

 

swiper를 초기화하는 생성자 함수 swiper = new Swiper(".swiper-container");

swiper를 제거하는 메서드 swiper.destroy();

 

swiper = new Swiper(".swiper-container"); 는 swiper를 호출하기 위한 함수로 친숙할 것이다.

swiper.destroy();는 호출된 swiper를 제거하는 메서드다.

 

 

2. 해상도에 따라 swiper 호출

해상도에 따라서 swiper를 호출하는 방법은 브라우저의 width를 구하고 1280px 미만일 때만 호출하고 이상일 때는 호출하지 않는 것이다.

var ww = $(window).width();
if (ww < 1280) {
  mySwiper = new Swiper(".swiper-container", {
    slidesPerView: 5,
    spaceBetween: 10,
    simulateTouch: true,
    loop: true,
    autoplay: {
      delay: 500,
      disableOnInteraction: false,
    },
  });
} else if (ww >= 1280) {
  // swiper 호출 안함
}

하지만 새로고침하지 않으면 변경된 해상도가 적용되지 않는다.

따라서 실시간으로 브라우저의 width를 갱신해야 한다.

var ww = $(window).width();
if (ww < 1280) {
  mySwiper = new Swiper(".swiper-container", {
    slidesPerView: 5,
    spaceBetween: 10,
    simulateTouch: true,
    loop: true,
    autoplay: {
      delay: 500,
      disableOnInteraction: false,
    },
  });
} else if (ww >= 1280) {
  // swiper 실행 안함
}
$(window).on('resize', function () {
  ww = $(window).width();
  if (ww < 1280) {
    mySwiper = new Swiper(".swiper-container", {
      slidesPerView: 5,
      spaceBetween: 10,
      simulateTouch: true,
      loop: true,
      autoplay: {
        delay: 500,
        disableOnInteraction: false,
      },
    });
  }
});

 

이제 브라우저 해상도를 resize하면 브라우저의 width 값이 ww 변수에 실시간으로 수정되고 ww 값이 1280px 미만이라면 swiper가 호출된다.

다만 중복되는 코드가 있으니 보기 좋게 중복을 제거하는 리팩토링을 한다.

var ww = $(window).width();
function initSwiper() {
  mySwiper = new Swiper(".swiper-container", {
    slidesPerView: 5,
    spaceBetween: 10,
    simulateTouch: true,
    loop: true,
    autoplay: {
      delay: 500,
      disableOnInteraction: false,
    },
  });
}
if (ww < 1280) {
  initSwiper();
} else if (ww >= 1280) {
  // swiper 실행 안함
}
$(window).on('resize', function () {
  ww = $(window).width();
  if (ww < 1280) {
    initSwiper();
  }
});

initSwiper() 함수에 swiper 호출을 정의하고 필요에 따라 initSwiper()를 호출하도록 했다.

 

하지만 이 방식에도 큰 에러가 있다.

1280px 미만에서 swiper가 호출되고 다시 1280px 이상으로 브라우저 해상도를 바꾸면 swiper가 여전히 실행되는 점,

또한 1280px 미만에서 swiper가 계속 호출되기 때문에 swiper가 이상하게 작동하는 점이다.

 

 

3. swiper의 타입 확인

swiper가 호출되었을 때와 호출되지 않았을 때를 어떻게 구분할 수 있을까?

1280px 이상에서 swiper의 타입을 확인해보자.

아직 호출되지 않은 swiper의 타입은 undefined다.

 

1280px 미만에서 swiper의 타입을 확인해보자.

호출된 swiper의 타입은 object다.

 

이제 우리는 호출 전/후 swiper의 차이를 확인했다.

만약 브라우저의 width가 1280 미만일 때 swiper의 타입을 확인하여 undefined라면 swiper를 호출하고, 타입이 object라면 이미 호출되었기 때문에 더 이상 swiper를 호출하지 않도록 하면 swiper 에러를 해결할 수 있다.

 

 

4. swiper 제거

이미 호출된 swiper에 destroy 메서드를 사용하면 swiper가 제거된다.

하지만 이미 호출된 swiper는 제거하더라도 타입이 object다.

따라서 swiper를 제거함과 동시에 타입도 undefined로 수정해야 한다.

 

그렇게 지금까지 배운 내용을 토대로 코드를 완성하면 아래와 같다.

var ww = $(window).width();
var mySwiper = undefined;

function initSwiper() {

  if (ww < 1280 && mySwiper == undefined) {
    mySwiper = new Swiper(".swiper-container", {
      slidesPerView: 5,
      spaceBetween: 10,
      simulateTouch: true,
      loop: true,
      autoplay: {
        delay: 500,
        disableOnInteraction: false,
      },
    });
  } else if (ww >= 1280 && mySwiper != undefined) {
    mySwiper.destroy();
    mySwiper = undefined;
  }
}

initSwiper();

$(window).on('resize', function () {
  ww = $(window).width();
  initSwiper();
});

 

 

 

See the Pen Swiper - 특정 해상도에서만 사용하기 by lpla (@lpla) on CodePen.