Swiper 슬라이드 반응형 - 리사이즈시 화면 크기에 따라 적용 & 해제(swiper slider responsive resize)

Swiper.js

 

See the Pen Swiper 슬라이드 리사이즈시 화면 크기에 따라 적용 & 해제 (swiper slide responsive resize) by kimyangsun (@kimyangsun) on CodePen.

 

Swiper 슬라이드 반응형 - 리사이즈시 화면 크기에 따라 적용 & 해제(swiper slider responsive resize)

코드펜 예제입니다.

현재 pc로 이 화면을 보시는 분들에게는 위에 코드펜 미리보기에 swiper 슬라이드가 적용되지 않는 상태일겁니다. 

왜냐하면 화면 사이즈가 600 이하일때 swiper가 적용되도록 스크립트로 적용해둔 상태이기 때문이죠.

 

이제 위에 코드펜 미리보기에서 좌측 상단에 HTML, CSS, JS 같은 버튼을 눌러보세요.

그러면 화면에 절반에 코드가 나올텐데 그렇게 되면 자동으로 옆에 화면은 600 이하의 크기로 줄어들면서

swiper가 적용되는 모습을 확인할 수 있습니다.

그 후에 다시 좌측 상단에 활성화된 버튼을 한번 더 누르면 다시 처음처럼 코드 영역이 비활성화 되는데

그때는 너비가 601 이상이므로 swiper가 다시 풀립니다. :)

 

let swiper;
function initSwiper() {
  if (window.innerWidth <= 600) {
    /* 너비가 600 이하일때 슬라이드 적용되도록 */
    swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 16,
      loop: false,
      speed: 500,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  } else {
    /* 너비가 601 이상일때 슬라이드 해제 */
    if (swiper) swiper.destroy();
  }
}

let timer;
window.addEventListener('resize', function () {
  if (timer) clearTimeout(timer);
  timer = setTimeout(initSwiper, 100);
});

initSwiper();