많이 사용되는 bxSlider의 옵션들

항상 홈페이지를 만들다 보면 배너 슬라이더를 많이 하게 되는데

이것 저것 써봐도 bxSlider 만한게 없는데

자세한 옵션 설명되어 있는 참조페이지가 있어서

적어봅니다.

★★★ : 작업하다가 샘플로 안될때 => bxSlider.css 파일에 의해 안될 수 있으니깐, jquery와 bxSlider.js파일만 사용하기를...^^

출처 : http://wooreeweb.com/lecture/archives/140

var 변수 = $( '선택자' ).bxSlider( {

    옵션 설정

} );

bxSlider 옵션

mode           ‘horizontal’ ‘horizontal’‘vertical’‘fade’     슬라이드 이동 방향 설정
speed          500          숫자            슬라이드 전환 속도
pager           true         논리            동그라미(불릿) 버튼 노출 여부
moveSlides   0             숫자            슬라이드 이동시 개수
slideWidth    0             숫자            슬라이드 너비
slideMargin   0             숫자            슬라이드 사이 여백
maxSlides     1             숫자            슬라이드 최대 노출 개수
minSlides      1             숫자            슬라이드 최소 노출 개수
auto false      논리        자동            슬라이드 여부
autoHover      false       논리            슬라이드에 마우스 호버시 애니메이션 정지 여부
controls         false       논리            이전/다음 버튼 노출 여부

슬라이드 제어 메소드 종류

구분 기능
변수.goToSlide(숫자)               지정한 [숫자] 슬라이드로 이동
변수.goToNextSlide()               다음 슬라이드로 이동
변수.goToPrevSlide()               이전 슬라이드로 이동
변수.startAuto()                       자동으로 슬라이드 전환
변수.stopAuto()                       자동 슬라이드 전환 기능 정지

<SCRIPT src="js/jquery.bxslider.min.js"></SCRIPT>
<SCRIPT>
 $( function () {
  var mySlider = $( '#slide_banner' ).bxSlider( {
   mode: 'horizontal',// 가로 방향 수평 슬라이드
   speed: 500,        // 이동 속도를 설정
   pager: false,      // 현재 위치 페이징 표시 여부 설정
   moveSlides: 1,     // 슬라이드 이동시 개수
   slideWidth: 100,   // 슬라이드 너비
   minSlides: 4,      // 최소 노출 개수
   maxSlides: 4,      // 최대 노출 개수
   slideMargin: 5,    // 슬라이드간의 간격
   auto: true,        // 자동 실행 여부
   autoHover: true,   // 마우스 호버시 정지 여부
   controls: false    // 이전 다음 버튼 노출 여부
  } );

    //이전 버튼을 클릭하면 이전 슬라이드로 전환
  $( '#prevBtn' ).on( 'click', function () {
   mySlider.goToPrevSlide();  //이전 슬라이드 배너로 이동
   return false;              //<a>에 링크 차단
  } );

    //다음 버튼을 클릭하면 다음 슬라이드로 전환
  $( '#nextBtn' ).on( 'click', function () {
   mySlider.goToNextSlide();  //다음 슬라이드 배너로 이동
   return false;
  } );

  // 다른 예제...
  slider = $('.bxslider').bxSlider({
 nextSelector: '.next-slide',
 nextText: '>', 
 prevSelector: '.prev-slide',
 prevText: '<',
 mode: 'fade',
 captions: false,
 auto: true,
 autoControls: false,
 onSlideAfter: function(){   
  $('.slide-number').text((slider.getCurrentSlide()+1)+'/'+slider.getSlideCount());  
 }
    });

 } );
</SCRIPT>
<STYLE>
 * { margin: 0; padding: 0; }
 #banner_wrap { position: relative; width: 500px; margin: 0 auto; }
 #prevBtn { position: absolute; left: 0; top: 10px; }
 #nextBtn { position: absolute; right: 0; top: 10px; }
</STYLE>

<DIV id=banner_wrap>
<UL id=slide_banner>
 <LI>
  <A href="http://godlvkhj.tistory.com/admin/entry/post/?id=60&amp;returnURL=CLOSEME#">
   <IMG alt="" src="http://godlvkhj.tistory.com/100/75/nature">
  </A>
 
 <LI>
  <A href="http://godlvkhj.tistory.com/admin/entry/post/?id=60&amp;returnURL=CLOSEME#">
   <IMG alt="" src="http://godlvkhj.tistory.com/100/75/sports">
  </A>
 
 <LI>
  <A href="http://godlvkhj.tistory.com/admin/entry/post/?id=60&amp;returnURL=CLOSEME#">
   <IMG alt="" src="http://godlvkhj.tistory.com/100/75/transport">
  </A>
 
 <LI>
  <A href="http://godlvkhj.tistory.com/admin/entry/post/?id=60&amp;returnURL=CLOSEME#">
   <IMG alt="" src="http://godlvkhj.tistory.com/100/75/nightlife">
  </A>
 
 <LI>
  <A href="http://godlvkhj.tistory.com/admin/entry/post/?id=60&amp;returnURL=CLOSEME#">
   <IMG alt="" src="http://godlvkhj.tistory.com/100/75/abstract">
  </A>
            
</LI></UL>
</DIV>