Seong-Jung's Blog

반응형

공식 사이트 링크 : http://www.gmarwaha.com/jquery/jcarousellite/

대표적인 이미지 롤링(Rolling) 플러그인


- html 소스

※ 주의할 점 : 반드시 div 또는 다른 block element 등의 태그로 ul 태그를 감싸주고, 이미지 롤링은 ul, li 태그로 이루어져야 함

  • 이미지명
  • 이미지명
  • 이미지명
  • 이미지명
  • 이미지명
  • 이미지명
  • 이미지명
  • 이미지명
  • 이미지명
  • 이미지명


- javascript 소스

※ 주의할 점 : Selector 객체를 반드시 ul, li를 감싼 div 또는 다른 block element로 설정해야 함

$('#area_banner').jCarouselLite({
    btnPrev: null,                      // 배너 좌측 이동 버튼
    btnNext: null,                      // 배너 우측 이동 버튼
    btnGo: [".0", ".1", ".2"],          // 클래스에 해당하는 배열번호를 가진곳으로 이동
    btnPause: $('#btn_stop_banner'),    // 롤링 멈춤 Object
    btnResume: $('#btn_start_banner'),  // 롤링 재시작 Object
    pauseOnHover: true,                 // 마우스 오버시 롤링 멈춤 여부
    mouseWheel: false,                  // 마우스 휠로 제어 가능 여부
    auto: 500,                          // 자동으로 움직이는 롤링 속도
    speed: 1500,                        // 롤링 속도
    easing: null,                       // easing 효과
    vertical: false,                    // 가로/세로 롤링 여부
    circular: true,                     // 롤링 순환 여부
    visible: 5                          // 보이는 이미지 갯수
});


반응형