jquery.bxslider.jsオプション

jquery.bxslider.jsオプション

jquery.bxslider.jsは、素晴らしいスライダーのjQueryプラグインですが、そのオプションの多さも素晴らしいですよね。
組み合わせて色々なカスタマイズが出来るように色々な窓口が用意してあります。
そのオプションをご紹介いたします。

bxsliderオプションの使い方サンプル

以下ののオプションの値は全部デフォルトの値です。
つまり$( '#bxslider' ).bxSlider();と一緒ですが説明のためにね。

( function( $ ) {  //wp仕様
	$( document ).ready( function(){
		
		
		//bxslider 呼び出し&オプション設定
		$( '#bxslider' ).bxSlider( {
			//基本設定的な項目
			mode: 'horizontal',
			speed: 500,
			slideMargin: 0,
			startSlide: 0,
			randomStart: false,
			slideSelector: '',
			infiniteLoop: true,
			hideControlOnEnd: false,
			easing: null,
			captions: false,
			ticker: false,
			tickerHover: false,
			adaptiveHeight: false,
			adaptiveHeightSpeed: 500,
			video: false,
			responsive: true,
			useCSS: true,
			preloadImages: 'visible',
			touchEnabled: true,
			swipeThreshold: 50,
			oneToOneTouch: true,
			preventDefaultSwipeX: true,
			preventDefaultSwipeY: false,
			//ページャー（スライダー下の●●●みたいなやつ）
			pager: true,
			pagerType: 'full',
			pagerShortSeparator: ' / ',
			pagerSelector: '',
			pagerCustom: null,
			buildPager: null,
			//コントローラー（スライダー左右に現れる矢印的なもの）
			controls: true,
			nextText: 'Next',
			prevText: 'Prev',
			nextSelector: null,
			prevSelector: null,
			autoControls: false,
			startText: 'Start',
			stopText: 'Stop',
			autoControlsCombine: false,
			autoControlsSelector: null,
			//オート（自動再生関係）
			auto: false,
			pause: 4000,
			autoStart: true,
			autoDirection: 'next',
			autoHover: false,
			autoDelay: 0,
			//カルーセルスライダーにするときの設定
			minSlides: 1,
			maxSlides: 1,
			moveSlides: 0,
			slideWidth: 0,
			//コールバック（アクションへのフック）
			onSliderLoad: function(){},
			onSlideBefore: function(){},
			onSlideAfter: function(){},
			onSlideNext: function(){},
			onSlidePrev: function(){}
		} );
		
		
	} );
} )( jQuery );

用意されているメソッド

( function( $ ) {  //wp仕様
	$( document ).ready( function(){
		
		
		//bxslider 呼び出し&オプション設定
		var slider = $( '#bxslider' ).bxSlider();
		slider.goToSlide(3);
		slider.goToNextSlide();
		slider.goToPrevSlide();
		slider.startAuto();
		slider.stopAuto();
		var current = slider.getCurrentSlide();
		var slideQty = slider.getSlideCount();
		slider.reloadSlider();
		slider.destroySlider();
		
		
	} );
} )( jQuery );

オプションの説明

※オフィシャルサイト（オプションページ英語