[jQuery] jQuery plugin 입니다.

이번에 새로 만든 jQuery  플러그인입니다.  순수 jQuery로 되어있습니다.

 

touchSwipe.zip

 

 

※ 특징

① IE, Webkit, Mozila, Opera 호환

② IE가 아닌 브라우저에서는 Transform으로 화면 전환

③ 터치와 마우스로도 슬라이드 동작

④ 슬라이드의 끝이 존재하지 않는 무한 롤링기능

※ 보안이 필요한 점

① 자동슬라이드 기능이 추가예정 - 슬라이드쇼

② transform 동작 유형 추가예정 - 슬라이드밖에 구현되지 않음 , 큐브방식 구현을 시작으로 여러가지 구상중...

 

※ 개선사항

① 버그수정

② IE11버젼에서 transform 으로 배너구현

 

※ 사용법

슬라이드 태그를 아래와 같이 만들고

순서대로 배너, 좌우버튼, 네비게이션(캐럿셀)

<div id="bn_container" style="height:200px;"> <div id="bn_wrapper"> <div style="background-color:orange; width:300px;height:170px;border:solid 1px;float:left;"></div> <div style="background-color:yellow; width:300px;height:170px;border:solid 1px;float:left;"></div> <div style="background-color:green; width:300px;height:170px;border:solid 1px;float:left;"></div> <div style="background-color:blue; width:300px;height:170px;border:solid 1px;float:left;"></div> </div> </div> <div id="banner_navi"> <img id="btn_l" src="/images/left.png" style="width:50px;" /> <img id="btn_r" src="/images/right.png" style="width:50px;" /> </div> <ul id="nv_container"> <li class="nv_btn" style="width:50px;display:inline-block">1</li> <li class="nv_btn" style="width:50px;display:inline-block">2</li> <li class="nv_btn" style="width:50px;display:inline-block">3</li> <li class="nv_btn" style="width:50px;display:inline-block">4</li> </ul>

스크립트를 구성한다.

<script type="text/javascript"> $(document).ready(function(){ $("#bn_container").touchSwipe({ banner_wrp : $("#bn_wrapper"), banner_lbt : $("#btn_l"), banner_rbt : $("#btn_r"), nv_btn : $(".nv_btn") }); }); </script>

그러면 이렇게 만들어진다.

• 1
• 2
• 3
• 4