簡単！bxSliderでスライドショーを作成

レスポンシブで簡単に設置できるjQueryスライドショー、bxSliderの使い方をご紹介します。

ダウンロード、設置

http://bxslider.com/にアクセスし、右上のDownloadボタンからファイルをダウンロードします。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>

head内に読み込みを記述します。

HTML

HTML側での記述はこんな感じです。

<ul class="bxslider">
  <li><img src="images/01.jpg" /></li>
  <li><img src="images/02.jpg" /></li>
  <li><img src="images/03.jpg" /></li>
  <li><img src="images/04.jpg" /></li>
</ul>

関数の呼び出し

jQueryファイルの読み込みの後に、関数の呼び出しを記述します。

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>

オプション

たくさんのオプションが用意されています。

■mode

スライドショーの種類

デフォルト：horizontal

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'fade'
  });
});
</script>

horizontal：横スライド
vertical：縦スライド
fade：フェードイン・フェードアウト

■speed

スライドショーのスピード

デフォルト：500

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    speed: 1000
  });
});
</script>

■startSlide

最初のスライド

デフォルト：0

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    startSlide: 2
  });
});
</script>

何番目のスライドを一番最初に表示させるか。

■randomStart

ランダム表示

デフォルト：false

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    randomStart: 'true'
  });
});
</script>

最初のスライドをランダムに表示させる。

■infiniteLoop

スライドのループ

デフォルト：true

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    infiniteLoop: 'false'
  });
});
</script>

最後のスライドにいったとき、最初のスライドにループさせるかどうか。

■hideControlOnEnd

コントローラーの表示・非表示

デフォルト：false

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    hideControlOnEnd: 'true'
  });
});
</script>

trueにすると、最後のスライド（もしくは最初のスライド）にいったときに「次へ」（もしくは「前へ」）のボタンが非表示になります。「infiniteLoop」がfalseの場合は当たり前に表示されませんが。

■easing

easingの種類

デフォルト：null

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    easing: 'linear'
  });
});
</script>

linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(n,n,n,n)

■captions

キャプションをつける

デフォルト：false

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    captions: 'true'
  });
});
</script>

キャプションは、imgタグにtitle属性で追加します。

■ticker

ティッカーモード

デフォルト：false

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    ticker: 'true'
  });
});
</script>

ニュースティッカーのようになるらしい。

■tickerHover

ティッカーモードを一時停止

デフォルト：false

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    tickerHover: 'true'
  });
});
</script>

ティッカーモードで、ホバー時に一時停止する。

■adaptiveHeight

要素の高さを動的に変化

デフォルト：false

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    adaptiveHeight: 'true'
  });
});
</script>

要素の高さに合わせて動的にスライドショーの高さを調節する。

■video

動画

デフォルト：false

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    video: 'true'
  });
});
</script>

プラグインを使えば動画の再生もできる。

■responsive

レスポンシブ

デフォルト：true

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    responsive: 'false'
  });
});
</script>

デフォルトではレスポンシブ対応になっています。

■touchEnabled

タッチ操作

デフォルト：true

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    touchEnabled: 'false'
  });
});
</script>

タッチデバイスでのタッチ操作を可能にするか。

■pager

ページャー

デフォルト：true

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    pager: 'false'
  });
});
</script>

ページャーを表示するか。

■pagerType

ページャーのタイプ

デフォルト：full

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    pagerType: 'short'
  });
});
</script>

shortの場合は　1/5　のようなかんじ。

■controls

コントローラーの表示・非表示

デフォルト：true

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    controls: 'false'
  });
});
</script>

■auto

自動再生

デフォルト：false

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    auto: 'true'
  });
});
</script>

自動再生させる。

■pause

一時停止

デフォルト：4000

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    pause: '2000'
  });
});
</script>

一時停止させる秒数。

オプションを全部書こうと思ったのですが、多すぎて無理でした。詳しくはこちらをご覧ください…。

導入に時間もかからず、簡単にスライドショーを作成できます。レスポンシブだし、スワイプにも対応していて割りと重宝しています。