Swiper 활용 - 반응형, display:none 이슈

dkim-91·2022년 3월 11일
0

Intro

swiper를 적용하여 반응형 코딩을 하던 중 반응형 기준에 맞춰 swiperPerView를 3,6,9씩 보여주는 UI를 만들던 중 브라우저창 전체화면 시 swiper가 일부 깨지는 현상이 발견되었다.

첫번째 시도

윈도우 리사이즈시 swiper.update() 메서드를 실행하면 해결할 수 있을 것 같았다. 리사이즈 마지막 발생시점(?)에 swiper.update() 메서드를 실행해보았으나 결과는 실패였다. 원인불명인데 update() 메서드의 버그로 유추해본다.

var swiper;
$(function){
	swiper = new Swiper(".swiper-container",{
    	slidesPerView:9,
      	loop:true,
      	breakpoints:{
        	720:{
              slidesPerView:3
            },
        	900:{
              slidesPerView:3
            },
        	1180:{
              slidesPerView:3
            },
        }
    });
  
  	var resizeCheck; // 리사이즈 END체크
  	$(window).resize(function(){
    	if(resizeCheck){ //계속 리사이즈중이면 clear
        	clearTimeout(resizeCheck); 
        };
      
      	//0.5초이상 리사이즈 지속하지않으면 실행
      	resizeCheck = setTimeout(function(){
        	console.log("resizeEnd");
          	swiper.update(); //스와이퍼 업데이트
        },500);
    });
}

두번째 시도

일전에 탭메뉴로 탭1 일반컨텐츠, 탭2 스와이퍼 컨텐츠를 구현한 경험이 있었다. 그 당시 탭2가 display:"none" 되어있어서 탭1로 진입후 탭2 클릭시 스와이퍼가 제대로 동작하지않은 경험이 있다. 그당시 사용했던 방법은
스와이퍼에 observer, observeParents 매개변수로 각각 true값을 넣어서 해결했던 방법이다. swiper API에 따르면 아래와 같은내용이다.

observer : true
Swiper는 스타일을 변경(예: 숨기기/표시)하거나 하위 요소를 수정(예: 슬라이드 추가/제거)할 때마다 업데이트(재초기화)됩니다.

observeParents : true
Swiper 부모요소의 변화에따라 업데이트(재초기화)됩니다.

위의 매개변수를 추가함으로써 브라우저창 전체화면 시 swiper가 일부 깨지는 현상도 해결되었다.

참고자료: https://swiperjs.com/swiper-api

profile
웹퍼블리셔

0개의 댓글