このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>jquery.bxslider.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>jquery.bxslider.min.js"></script>
<script>
	$('.bxslider').bxSlider({
		preloadImages: 'all'
	});
</script>


//オプション一覧
mode: 'horizontal',
slideSelector: '',
infiniteLoop: true,
hideControlOnEnd: false,
speed: 500,
easing: null,
slideMargin: 0,
startSlide: 0,
randomStart: false,
captions: false,
ticker: false,
tickerHover: false,
adaptiveHeight: false,
adaptiveHeightSpeed: 500,
video: false,
useCSS: true,
preloadImages: 'visible',
responsive: true,

// TOUCH
touchEnabled: true,
swipeThreshold: 50,
oneToOneTouch: true,
preventDefaultSwipeX: true,
preventDefaultSwipeY: false,

// PAGER
pager: true,
pagerType: 'full',
pagerShortSeparator: ' / ',
pagerSelector: null,
buildPager: null,
pagerCustom: null,

// CONTROLS
controls: true,
nextText: 'Next',
prevText: 'Prev',
nextSelector: null,
prevSelector: null,
autoControls: false,
startText: 'Start',
stopText: 'Stop',
autoControlsCombine: false,
autoControlsSelector: null,

// AUTO
auto: false,
pause: 4000,
autoStart: true,
autoDirection: 'next',
autoHover: false,
autoDelay: 0,

// CAROUSEL
minSlides: 1,
maxSlides: 1,
moveSlides: 0,
slideWidth: 0,

// CALLBACKS
onSliderLoad: function() {},
onSlideBefore: function() {},
onSlideAfter: function() {},
onSlideNext: function() {},
onSlidePrev: function() {}
<ul class="bxslider">
	<li><img src="<PATH>/img01.jpg" /></li>
	<li><img src="<PATH>/img02.jpg" /></li>
	<li><img src="<PATH>/img03.jpg" /></li>
	<li><img src="<PATH>/img04.jpg" /></li>
</ul>

bxSliderについて

bxSliderは、とても簡単にスライダーを設置することができるプラグインです。
オプションも豊富に用意されていて、様々な使い方ができる万能型のスライダープラグインです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • FullscreenSlitSlider

    FullscreenSlitSlider

    様々なエフェクトでスライドを実装できる

  • Fathom

    Fathom

    プレゼン向きのスライダープラグイン

  • SlidesJS

    SlidesJS

    シンプルなスライダー

  • NivoSlider

    NivoSlider

    簡単にリッチなスライダーを設置

  • Swipebox

    Swipebox

    スマホのスワイプに対応した全画面スライダー