page swiper plugin 추천 / 페이지 슬라이드 / 이미지 슬라이드 / 탭 슬라이드 / jquery mobile 호환

 

Jquery mobile 로 모바일 웹을 만들던 중에 Tab에 슬라이드 기능이 필요했다.

 

jquery mobile 에서 제공하는 swipe 를 이용하면 된다고 생각했는데....

 

swipe로 특정 태그에 이벤트를 걸어줄 수 는 있지만 transition 옵션(슬라이드 애니메이션)은 먹히지 않더라...

 

그래서 다른 플러그인을 써야만 했다.

 

 

 

먼저 내가 사용해야하는 기준을 나열해 보았다.

늘 생각하는데 현재 프로젝트의 환경(jquery version, jqm version, plugins version 등 환경이 다르면 충돌을 야기함)과 내가 필요로 하는 기능을 가진 플러그인을 찾는다는게 쉽지많은 않다.

 

이번 선정 기준은 까다로웠다.

 

1. jquery mobile과 충돌나지 않아야 한다.

이번에 Jqm을 써보면서 다른 Jquery Plugin들과 충돌이 많았다.

2. div 영역 자체가 슬라이드 되어야 한다.

Jqm Tab 에 사용되어야 하기 때문에 어느정도 사용하는 태그들의 구조가 비슷해야한다.

Img 태그에 최적화 되어있는 것들이 많다.

3. 내가 사용할 기능은 모두 있으면서 무겁지 않아야 한다.

내가 사용할 기능보다 더 많은 기능을 가지고 있으면 비효율적이기만 하다.

딱 내가 사용할 기능만 있는 심플한게 좋다.

4. 사용이 간편해야 한다.

고 퀄리티의 플러그인들은 사용이 복잡하기 마련이다.

5. API 문서 또는 DEMO 가 잘 되어 있어야 한다.

DEMO에서 다 표현되지 못하는 이벤트나 함수 등을 설명하는 문서는 필수이다.

6. 슬라이드 전, 후에 발생하는 이벤트가 있어야 한다.

슬라이드 이벤트에 대한 선, 후행작업이 있을 수 있다.

7. 슬라이드를 컨트롤하는 버튼들을 제어할 수 있어야 한다.

보통 슬라이드를 보면 슬라이드 갯수를 나타내는 네비게이션 버튼? 이나 화살표 등이 기본으로 탑재되곤 한다.

나는 버튼이 필요 없어서 옵션으로 해제하고 싶다. 소스를 뜯어 고칠 수도 있지만 그런 작업은 좋지 않다.

8. 드래그로 슬라이드를 할 수 있어야 한다.

9. Mobile 환경 ( web view ) 에서도 유려하게 작동해야 한다.

10. 무료 라이센스여야 한다.

 

이 10가지를 모두 만족하는 플러그인을 이틀만에 찾았다.

 

Slick 라는 플러그인이다.

 

License 는 MIT 이다. Good ~~

 

아주 심플하고 내가 필요로 하는 기능만 딱 있었다.

 

플러그인에 대한 사용방법이나 다운로드는 공식 사이트를 참고하는 게 훨씬 좋겠다.

http://kenwheeler.github.io/slick/

 

문서도 잘 되어있다.

 

잘 다듬어서 Jquery Mobile Tab 에 붙혀서 사용중이다.

 

얼핏 보면 네이버 모바일 메인화면과 비슷하다.

 

 

 

 

근데 2가지 문제가 있었다.

 

첫번째는 이미 Jquery Mobile Swipe 를 Page 영역에 사용중이여서 드래그(Swipe) 하게 되면 탭이 움직이면서 페이지도 움직여 버린다.

 

해결방법은 Slick 로 Tab 를 슬라이딩 할 땐 Jqm Swipe 를 동작하지 않게 구현했다.

다행이 이벤트 순서가 Slick -> Swipe 순이여서 이벤트를 컨트롤 할 수 있었다.

 

두번째는 조금 크리티컬했다. Swipe 플러그인에 버그가 있다.

슬라이딩 하는 이벤트 slickGoTo 가 빠르게 여러번 호출되면 2번째는 무시된다.

다시말해 slickGoTo 를 호출하고 0.5초정도(?) 사이에 재호출 하면 무시되어 버린다.

아마 슬라이드를 진행하는 중에는 재호출 되더라도 실행되지 않는 것 같다.

슬라이드가 종료된 후에는 다시 정상작동한다.

 

 

// dummy div (화면가리기용, 투명)
function setDummyDivFullScreen(){
    var divHtml = '<div id="DUMMY_DIV_FULL_SCREEN" style="position: absolute; width: 100%; height: 100%; z-index:9999;"></div>';
    $("body").append(divHtml);
}
function removeDummyDivFullScreen(){
    $("[id^='DUMMY_DIV_FULL_SCREEN']").each(function(i) {
        $(this).remove();
    });
}

 

해결방법은 슬라이드가 시작하기 전, 후 로 화면 전체를 가리는 DIV 를 만들어서 화면을 잠그는 작업을 해주었다.

Slick 의 afterChange, beforeChange 를 이용해서 before 에는 setDummyDivFullScreen(), after 에는 removeDummyDivFullScreen() 를 호출했다.

 

임시방편에 불과하지만 나름 나쁘지 않았다.

 

 

 

그리고 플러그인 개발자에게 위 현상에 대해서 문의를 해논 상황이다.

 

빠른 시일 내에 답변이 오거나 다음 버전때 수정됬으면 좋겠다.