퍼블리싱도 예전에는 간단한 작업들이 많았지만 요즘은 라이버리나 오픈소스나 다양한 플러그인이 있어서 이것저것 활용하기가 좋습니다. 처음 디자인과 퍼블리싱 하던 시절을 생각하면 요즘 환경은 많이 편해진 것 같지만 요즘은 예전보다 공부할 것도 많고 작업이 더 복잡하고 다양한 요구사항들이 생겨서 그닥 좋은것만은 아니긴 하네요.
Swiper는 터치 슬라이드 환경이 많은 모바일에 맞춰 만들어진 API인데요. 갈수록 좀 무거워지는 경향이 있지만 아직까진 가장 깔끔한 터치 슬라이드 API 인 것 같습니다.
사용법도 간단하고 다양한 옵션을 제공하기 때문에 모바일이 아니라 PC WEB 환경에서도 종종 사용되곤 합니다.
Swiper가 다양한 기능을 담고 있다보니 여러 가지 UI 제작에 활용하게 되는데 단독 사용을 기반으로 만들어진 API라 문제가 발생하기도 하는데요. 다양한 옵션들이 있으니 대부분 매개 변수(파라미터, Parameters)만 설정해 주면 해결되곤 합니다.
Swiper를 Tab 메뉴 안에서 사용하려고 할 때도 종종 문제에 부딪히곤 하는데, 가장 많이 겪는 문제중에 하나가 두 번째 탭에서는 제대로 동작하지 않는 문제입니다.
보통 TAB 메뉴를 만들 때 두 번째 이상 나오는 탭들은 'display:none' 시키기 때문에 가로 값을 제대로 가져오지 못해서 발생하는 문제있은데요. 강제로 가로 사이즈를 맞춰도 되긴 하지만 제대로 되지 않을 때가 종종 있는데 이럴 땐 2개의 값만 넣어 주면 됩니다.
observer: true,
observeParents: true,
Swiper 스크립트에 위의 2개의 파라미터만 추가해 주면 되는데요. 간단하게 이야기하면 슬라이더가 불러올 때마다 새로 고침 해 주는 역할입니다. 그래서 탭을 전환해도 제대로 인식해서 불러오게 되는 거죠. 쉽죠?
탭 전환 방식을 다르게 사용하는 방법도 있는데 그건 좀 복잡하니 이 방법이 가장 간단하게 해결할 수 있을 것 같습니다.
자바스크립트를 잘 사용하는 사람들은 다른 방법도 있을 것 같은데, 대부분 누구나 쉽게 해결할 수 있으니 도움이 되시면 좋을 것 같습니다.
Swiper 홈페이지에서 다양한 스와이퍼 API의 파라메터를 확인할 수 있으니 참고해보세요.
Swiper API
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
