[ JQuery ] JQuery를 이용한 슬라이드 플러그인 - jquery.slides.min.js

참조 : http://blog.naver.com/espiar_/220040566457

다운로드 : jquery.slides.min.js

JQuery 를 이용한 슬라이드 플러그인

[ 플러그인 특징 ]

- 복잡하게 반응형도 필요없고 정해진 크기에 맞춰 간단하게 슬라이드가 되어야 하는경우 좋다.
- 사용 시 플러그인만 로드하면 규격이 정해진 CSS 를 로드할 필요가 없다.
- 따라서 모든 비주얼 요소는 사용자가 직접 커스터마이징을 할 수 있도록 되어있다.
   Prev / Next 버튼부터 Indicator 까지 오브젝트를 넘겨주기만 하면 필수로 설정해야 하는 부분외에는
   전부 CSS 로 작업이 가능하다.

[ 플러그인 사용방법 1 ]

- JQuery 최신 버전 ( 작업당시 1.11.0 이전 버전에서의 호환성 여부는 모름 )
- 다른 플러그인과의 순서 관계는 필요 없으며 JQuery 로드 하위 부분에 로드하면 된다.

[ 플러그인 사용방법 2 ]

- 기본적인 마크업 방법

<div id="slides">
   <img src="image1.jpg" />
   <img src="image2.jpg" />
   <img src="image3.jpg" />
   <img src="image4.jpg" />
</div>
<span id="slidesPrev">< Prev</span>
<span id="slidesNext">Next ></span>

* 크기만 맞다면 img 외에도 다른것을 포함한 div 가 들어갈 수 있다.

- 스크립트 작성방법

$('#slides').slides({
   width:500,   // 슬라이드 가로크기
   height:100,   // 슬라이드 세로크기
   interval:3000,   // 슬라이드 재생주기
   speed:750,   // 슬라이드 재생속도
   auto:1,   // 자동 재생여부
   usebtn:1,   // 버튼 사용여부
   nextbtn:$('#slidesNext'),   // 버튼
   prevbtn:$('#slidesPrev')
});

[ 플러그인 파라메터 ]

- width
   슬라이드의 가로 크기를 설정합니다. ( 기본값 750 )
- height
   슬라이드의 세로 크기를 설정합니다. ( 기본값 200 )
- interval
   슬라이드의 재생 주기를 설정합니다. ( 기본값 3000 )
- speed
   슬라이드의 재생 속도를 설정합니다. ( 기본값 750 )
- auto 
   슬라이드의 자동 재생 여부를 설정합니다. ( 기본값 1 )
- hoverstop
   슬라이드의 마우스를 올리면 재생을 멈출지 여부를 설정합니다. ( 기본값 1 )
- usebtn
   슬라이드를 컨트롤 할 버튼 사용 여부를 설정합니다. ( 기본값 0 )
- prevbtn, nextbtn
   usebtn 값이 1 일 때, 버튼 이벤트를 이용할 오브젝트를 설정합니다.
   사용 시 두 파라메터를 같이 사용해야 합니다.
- useindicator
   슬라이드의 인디케이터를 사용 할 지 여부를 설정합니다. ( 기본값 0 )
- indicator
   useindicator 값이 1 일 때, 인디케이터 역할을 할 오브젝트를 설정합니다. 이 오브젝트는 <ul></ul> 의
   형태여야 합니다. 설정 시, 슬라이드 갯수만큼 자동으로 <li>,</li> 가 추가되고, 자동으로 on 클래스가 토글됩니다.