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

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

bxslider

  1. ダウンロード、設置
  2. HTML
  3. 関数の呼び出し
  4. オプション

1.ダウンロード、設置

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内に読み込みを記述します。


2.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>

3.関数の呼び出し

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

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

4.オプション

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

■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>

一時停止させる秒数。


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

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

7 注釈 “簡単!bxSliderでスライドショーを作成

  1. こんばんは。はじめてblog見ました。

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

    これってどういうことでしょうか…??

    $(document).ready(function(){
    $(‘.bxslider’).bxSlider();
    });

  2. あ、オプションから好きなの選ぶってことでしょうか?

    ▼ヘッド内

    $(document).ready(function(){
    $(‘.bxslider’).bxSlider({
    mode: ‘fade’
    });
    });

    ▼ボディー内

    この状態で、スライドショーではなく、写真が連なっている状態です。。
    なぜでしょう。。

    ダウンロードした、pluginsフォルダもどこかに格納でしょうか???

    1. コメントありがとうございます。

      そうですね。オプションをそんな感じで書いていきます。
      写真が連なっているということは、jQueryが動いていないのではないでしょうか。
      以下をチェックしてみてください。

      1.jQueryが動く環境であるか。
      2.jQueryは読み込まれているか。
      3.jsファイルへのパスはあっているか。

      head内での読み込みではダウンロードしたファイルを読み込みますので、ファイルへのパスがあっていないと、読み込むことができません。

  3. narugaroさま、さっそく返信ありがとうございます。

    ローカルで作業して、ずっと反映されなく困っており、
    サーバーにアップしてみたら できました!
    ありがとうございました。

    ローカルで反映されないのに、サーバーにアップすれば反映するなどあるのですね。

    1. 動いてよかったです!
      ローカルでは、ブラウザやポートの問題などで動かない場合がありますので、検証はサーバー上で行った方が確実かと思います。

      また何かありましたら、ご相談くださいませm(_ _)m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です