Swiper 예제 - 활성화된 슬라이드 이미지 띄우기

 

아래 swiper 예제를 만들어보겠다.

 

 

 

이 슬라이더의 특징은 가운데 슬라이드, 다른 말로 활성화된 슬라이드는 위쪽으로 떠 보이는 효과가 있다.

덕분에 활성화된 슬라이드에 집중할 수 있 수 있고 간단한 트렌지션 효과로 심심하지 않다는 장점이 있다.

 

단순할 것 같지만 이 같은 슬라이더를 만드려면 한 가지 난관에 부딪힌다.

 

.swiper-slide-active { margin-top: -100px; }

활성화된 슬라이드는 .swiper-slide-active 클래스를 가진다.

이 클래스에 마진을 -100px 만큼 주면 가운데 이미지만 위쪽으로 올라가긴 하지만 슬라이더 바깥으로 벗어나지 못한다.

바로 swiper 전반에 걸쳐 overflow: hidden; 이 적용되어 있기 때문이다.

그렇다고 overflow: hidden; 을 모두 해제하면 보여선 안되는 슬라이드들까지 모두 노출돼 버리기 때문에 이 방법은 사용할 수 없다.

 

해결 방법은 간단하다.

 

.swiper-container { padding-top: 100px; }
.swiper-slide-active { margin-top: -100px; }

바로 swiper-container 요소에 내가 활성화된 슬라이드에 준 margin-top 값만큼 padding-top 을 주는 것이다.

margin과 padding만으로 문제를 해결 할 수 있다.