jQuery rolling slider : 자동 슬라드 롤링 블릿 플러그인(샤쿠(최석균))

데모 페이지
http://syakuis.github.io/demo/jquery-slider-rolling/demo.html

"jQuery rolling slider : 자동 슬라드 롤링 그리고 블릿 플러그인"

jQuery 용 플러그인이며, 이미지나 대상 아이템들을 왼쪽, 오른쪽, 위, 아래로 이동 (롤링및 슬라이드) 시킬 수 있는 기능입니다.

이동방향으로 자동으로 실행시킬 수 있으며, 수동으로 방향버튼을 클릭하여 이동시킬 수도 있습니다.

마지막으로 대상 아이템 수만큼 표시되는 블릿을 이용하여 이동시킬 수있습니다.

html 디자인은 사용자가 직접 자유롭게 꾸밀수 있도록 최대한 커스텀하게 구현하였습니다.

그리고 이전 버전에 있었던 버그들은 모두 수정하였습니다.
 

# 기존의 롤링 슬라이더를 대폭 개선한 새로운 버전입니다. 사용법은 거의 비슷하며 기존처럼 심플합니다.
2015/06/08 - [개발노트/jQuery] - jQuery rolling 플러그인

** 블릿 기능은 요청자가 있어 추가 개발하였습니다.

** 소스파일은 맨 하단에 첨부하였습니다.

*최신정보 받기

# Github : https://github.com/syakuis/jquery-slider-rolling

# 데모 : http://syakuis.github.io/demo/jquery-slider-rolling/demo.html

[2014.02.22] v1.3.1 이전 문제 모두 수정 (단, 아이템이 이동될때 마우스 오버시 멈추지않는 문제있음. 큰 문제는 아님. 수정예정)

[2014.02.22] v1.3.0 업데이트

                  블릿을 연속으로 누르면 버그발생 (수정중... 테스트를 완벽히 했다고 생각했건만;;;)

압축 파일에 데모가 있습니다. 직접 실행해보시면 이해가 쉽습니다.

데모화면 디자인은 그냥 데모일뿐, 직접 멋지게 꾸미시기 바랍니다~

기본 소스 예제

p_click : 이전 이동
n_click : 다음 이동
#srolling : 보여질 아이템들이 노출됨.

<div id="p_click">&lt;&lt;&lt;</div>
<div id="n_click">&gt;&gt;&gt;</div>
<div id="srolling" style="position: relative;overflow:hidden;width:100px;height:200px;border:#e0e2ef 1px solid;"></div>


<script> 

jQuery(function() { 

var data = [ "<div>1</div>", "<div>2</div>", "<div>3</div>", "<div>4</div>", "<div>5</div>", "<div>6</div>" ]; 

// 밑줄은 생략하셔도 됩니다.

jQuery("#srolling").srolling({ 

      data : [ ], // 롤링될 아이템 데이터

      item_count : 1, // 한번 이동될 아이템 수

      cache_count : 5, // 최초 한번 임시로 생성될 아이템 수 (고치지마세요)

      width : 100, // 노출될 아이템 크기 (필수 : 실제 아이템 보다 약간 크게 설정하세요)

      height : 100, // 노출될 아이템 크기 (필수 : 실제 아이템 보다 약간 크게 설정하세요)

      auto : false, // 자동 이동 설정

      delay : 1000, // 이동 후 대기 시간

      delay_frame : 500, // 이동 속도

      move : 'left', // 이동 방향 left , right , up , down 

      prev : '#srolling_prev', // 이전 아이템 이동 버튼 element

      next : '#srolling_next', // 다음 아이템 이동 버튼 element

      is_bullet : false, // 블릿 사용여부

      bullet : '#srolling_bullet', // 블릿 버튼 element

      bullet_item : '#srolling_bullet_item', // 블릿 버튼 item element

      bullet_style_func : null // 선택된 블릿 효과주기

}); 

});
</script> 

소스파일