JavaScript/실전
Swiper 예제 - 활성화된 슬라이드 이미지 띄우기
아래 swiper 예제를 만들어보겠다. 이 슬라이더의 특징은 가운데 슬라이드, 다른 말로 활성화된 슬라이드는 위쪽으로 떠 보이는 효과가 있다. 덕분에 활성화된 슬라이드에 집중할 수 있 수 있고 간단한 트렌지션 효과로 심심하지 않다는 장점이 있다. 단순할 것 같지만 이 같은 슬라이더를 만드려면 한 가지 난관에 부딪힌다. .swiper-slide-active { margin-top: -100px; } 활성화된 슬라이드는 .swiper-slide-active 클래스를 가진다. 이 클래스에 마진을 -100px 만큼 주면 가운데 이미지만 위쪽으로 올라가긴 하지만 슬라이더 바깥으로 벗어나지 못한다. 바로 swiper 전반에 걸쳐 overflow: hidden; 이 적용되어 있기 때문이다. 그렇다고 overflow:..
