[Swiper.js] 특정 브레이크포인트에서만 슬라이더 활성화 / 제거하기
기술정보 26.01.13 조회 58[Swiper.js] 특정 브레이크포인트에서만 슬라이더 활성화 / 제거하기
PC에서는 일반 리스트로, 모바일에서는 슬라이더로!
Swiper.js를 특정 해상도에서만 활성화하고 불필요할 때 제거(destroy)하는 기능을 소개합니다.
✅ 왜 특정 브레이크포인트에서만 Swiper를 사용할까요?
PC처럼 화면이 넓은 디바이스에서는 콘텐츠를 한 화면에 모두 노출해도 큰 문제가 없습니다.
하지만 모바일처럼 화면이 좁은 환경에서는 동일한 콘텐츠 구조가 그대로 나열되면서 페이지가 길어지고, 가독성도 떨어지기 쉽습니다.
이럴 때 특정 브레이크포인트에서만 Swiper 같은 슬라이더를 적용해 콘텐츠 구조를 단순하게 바꿔주는 방식이 꽤 효과적입니다.
➰➰➰
✏️ Swiper 작성은 이렇게!
✨ 이번 예제는 탭 메뉴 구조를 기준으로 작성되었습니다.
각 탭 안에 동일한 구조의 .swiper-container가 여러 개 존재하는 형태입니다.
탭이 전환되면서 슬라이더가 동적으로 노출·숨김되기 때문에, Swiper 인스턴스를 하나만 관리하면 중복 실행이나 레이아웃 오류가 발생할 수 있습니다.
그래서 이 예제에서는 querySelectorAll()로 여러 개의 swiper-container를 순회하며 각 슬라이더 인스턴스를 배열로 관리하는 방식을 사용했습니다.
Swiper의 destroy(deleteInstance, cleanStyles)
: Swiper 인스턴스를 완전히 제거하는 함수
: deleteInstance -> Swiper 인스턴스를 메모리에서 삭제할지 여부
: cleanStyles -> Swiper가 DOM에 추가한 스타일과 클래스를 제거할지 여부
: swiper.destroy(true, true) -> 모바일 ↔ PC 전환이 잦은 반응형 환경에서 가장 안정적인 방식
아래 코드는 화면 너비가 1024px 이하일 때만 Swiper를 실행하고, 그보다 넓어지면 Swiper를 완전히 제거(destroy) 하는 구조입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | // 1. 브라우저 화면 크기 감지 const inc03Mq = window.matchMedia("(max-width: 1024px)"); let inc03_slides = []; // 2. 슬라이더 초기화 함수 function initInc03Swiper() { if (inc03_slides.length) return; // 이미 실행 중이라면 중복 생성 방지 document.querySelectorAll("#inc03 .swiper-container").forEach(el => { const swiper = new Swiper(el, { loop: true, speed: 1200, slidesPerView: 1.2, spaceBetween: 12, centeredSlides: true, autoplay: { delay: 3000, disableOnInteraction: false }, a11y: { enabled: true, prevSlideMessage: '이전 슬라이드로 이동', nextSlideMessage: '다음 슬라이드로 이동', }, }); inc03_slides.push(swiper); // 생성된 인스턴스를 배열에 보관 }); } // 3. 슬라이더 제거 함수 function destroyInc03Swiper() { if (!inc03_slides.length) return; inc03_slides.forEach(swiper => { swiper.destroy(true, true); // 기능 제거 + 스타일 초기화 }); inc03_slides = []; // 배열 비우기 } // 4. 화면 크기 변경 시 생성/삭제 분기 처리 function inc03SwiperCheck(e) { if (e.matches) { // 1024px 이하일 때 최적의 타이밍에 생성 requestAnimationFrame(() => { initInc03Swiper(); }); } else { // 1024px 초과 시(PC) 완전히 제거 destroyInc03Swiper(); } } // 이벤트 리스너 등록 inc03Mq.addEventListener("change", inc03SwiperCheck); inc03SwiperCheck(inc03Mq); // 페이지 로드 시 첫 실행 | cs |
➰➰➰
✅ 자주 묻는 질문 (FAQ)
✔ Swiper를 특정 브레이크포인트에서만 실행할 수 있나요?
- 네, 가능합니다. window.matchMedia를 사용하면 특정 해상도 조건에서만 Swiper를 초기화할 수 있습니다.
✔ Swiper breakpoints 옵션만으로는 부족한가요?
- Swiper의 breakpoints 옵션은 슬라이드 옵션을 변경하는 데는 적합하지만, Swiper 자체의 실행 여부를 제어하기에는 한계가 있습니다.
✔ 특정 해상도에서 Swiper를 끄고 싶을 때는 어떤 함수를 쓰나요?
- Swiper의 destroy(deleteInstance, cleanStyles) 메소드를 사용합니다.
swiper.destroy(true, true); true, true 인자를 전달하면 Swiper 인스턴스 삭제와 함께 적용된 스타일까지 깔끔하게 제거할 수 있습니다.
PC에서는 깔끔한 리스트 레이아웃으로, 모바일에서는 가독성 좋은 슬라이더 구조로!
이처럼 브레이크포인트에 따라 Swiper를 동적으로 제어하는 방식은
디자인키트에서 제공하는 다양한 반응형 템플릿에도 바로 적용할 수 있습니다.
✨관련링크✨
