簡単に設置! jQueryスライドショー「bxSlider」

スポンサーリンク

スライドショー bxslider

軽量で設置も簡単、高機能なjQueryスライドショー「bxSlider」をご紹介します。

wordpressにはプラグインだけで設置可能なスライドショーがたくさんあります。今回はプラグインを使わないjQueryスライドショーを使いました。

高機能なjQueryスライドショー「bxSlider」

webサイトのトップページでよく見かけるスライドショーは、イチオシ情報を視覚的に伝えることができます。最近は高機能なjQueryスライドショーが簡単に設置できるようになりました。

いわしもjQueryスライドショーはよく使いますが、最近はレスポンシブ対応でスマホやタブレットでもはみ出したりせずに表示できるbxSliderがお気に入りです。

http://bxslider.com/

jQuery Content Slider | Responsive jQuery Slider | bxSlider

bxSliderは軽量で設置も簡単、普通にスライドショーを使うならこれで十分です。レスポンシブ対応で、スマホやタブレットでも横幅に合わせて画像のサイズを自動的に調整してくれます。

また、画像だけでなく動画も含めた表示が可能です。最近はWordPressで作ったサイトでもbxSliderを使ってますよ。

bxSliderを設置する

では、さっそくbxSliderを設置してみましょう。

まずはbxSliderの公式サイトhttp://bxslider.com/からファイルをダウンロードします。右上の「Download」をクリックしてください。

bxslider ファイルダウンロード

ダウンロードしたzipファイルには、bxSlider設置のためのファイルやフォルダが入っていますが、基本的に必要なのは「jquery.bxslider.min.js」と「jquery.bxslider.css」と「images」の3つだけです。

bxslider 設置用ファイル

続いて、サーバに上記3つのファイルをアップロードして、headにファイルへのリンクを記載します。「自分のアドレス」の部分は、bxSliderをアップした場所に合わせて適切なパスを記載してください。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="自分のアドレス/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="自分のアドレス/jquery.bxslider.css" rel="stylesheet" />

お次は切り替える画像を指定します。bxSliderを設置したい場所に下記を記載してください。こちらもアップした場所に合わせてパスを変更します。

この場合は画像を「images」に4枚入れています。もちろん、画像は何枚でもOKです。増やした分だけ画像のパスを記載してください。

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

最後にbxSliderを呼び出せば、スライドショーがスタートしますが、公式ページにある呼び出しコードをそのまま使っても動かない場合があります。

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

bxSliderを正常に動かすためには、呼び出しコードを下記のように<script type=”text/javascript”></script>で括ってください。

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

いわしのwordpressサイトでは、<script type=”text/javascript”></script>で括ってやらないと動きませんでした。

bxSliderの動作は、下記ページで確認してください。サンプル画像はいわしのニャンコさまでございます。かわいいでしょ~♪

http://wind-mill.co.jp/bxslider.html

jQueryスライドショー「bxSlider」サンプル

いや、親バカで申し訳ない・・・

bxSliderの設定

bxSlider公式ページには、いろいろなカスタマイズのサンプルが掲載されています。

ここを参考にして、テキストを表示させたり、縦にスクロールさせたり、サムネイルをつけたり、自分好みにアレンジしたスライドショーを作りましょう。

http://bxslider.com/examples

Examples | Responsive jQuery Slider | bxSlider

Optionsを設定してやると、スライド動作の選択、スライドの静止時間設定、自動再生の選択など、スライドの動きをいろいろ指定できます。

auto : スライドの自動再生を選択します。デフォルトはfalseなので、自動で切り替えるならtrueを指定します。
mode : スライドの動作を選択します。’horizontal’、’vertical’、’fade’があって、それぞれ横・縦・フェードで画像が切り替わります。デフォルトは横スライドのhorizontalです。
pause : スライドの静止時間を指定します。
speed : スライド動作の速度を指定します。
pager : ページャーを設置します。

bxSlider Options設定 記載例

下記の記載例ですが、上から自動でスライドショースタート、画像静止時間6秒、画像切り替わり時間1秒、ページャー(画像下の●●●)なし、コントローラー(左右の矢印)なし、画像切り替わりが横スライドということになります。

auto: true,
pause: 6000,
speed: 1000,
pager: false,
controls: false,
mode: ‘horizontal’,

その他のOptionsはこちらのbxSlider公式ページをご覧ください。設定項目で「options: integer」の所は数値を指定、「options: boolean (true / false)」の所はtrueかfalseのどちらかを指定します。

http://bxslider.com/options

Options | Responsive jQuery Slider | bxSlider

下記の例は、bxSliderの自動スライドショースタートと、コントローラーを付けた場合の記述です。

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

続いて、bxSliderの自動スライドショースタート、縦スライドで画像切り替わりの場合です。

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

動作はこちらで確認してください。bxSliderの自動スライドショースタート、縦スライドで画像切り替わりの場合です。

http://wind-mill.co.jp/bxslider2.html

jQueryスライドショー「bxSlider」縦スライドサンプル

bxSliderはオプションで様々な設定が可能です。ただ、説明が英語なのでよくわからないという方は、HOZUNOMIYAさんがオプションの項目に日本語のコメントを付けてくれてます。ぜひ参考にしてください。

https://hozunomiya.xyz/?p=83

[jQuery]bxSliderオプション多すぎたので日本語でコメントつけといた | HOZUNOMIYA

あと、Web Design Magazineでは「bxSlider」のいろいろなオプションの使い方をまとめてくれてます。オプションの記述例やデモもありますよ。こちらもぜひ参考に・・・

http://webdesignmagazine.net/javascript/bxslider-options/

jQueryプラグイン「bxSlider」のいろいろなオプションの使い方のまとめ! | Web Design Magazine

bxSlider 画像にリンクを張る

bxSliderはスライドショーの画像にリンクを張るのも簡単です。特別な設定は不要で、下記のようにスライドショー画像へリンクを追記すればOKです。

<ul class="bxslider">
  <li><a href="http://hogehoge.com/page1.html"><img src="/images/●●●1.jpg" /></a></li>
  <li><a href="http://hogehoge.com/page2.html"><img src="/images/●●●2.jpg" /></a></li>
  <li><a href="http://hogehoge.com/page3.html"><img src="/images/●●●2.jpg" /></a></li>
</ul>

これでスライド中の各画像をクリックすると、リンク先URLに飛んで行くようになります。

これなら動く bxSlider設置の流れ

では、最後におさらいを兼ねて、bxSlider設置までの流れをもう一度見てみましょう。初心者の方でも、この通りにやれば多分動きます。

まずは公式サイトからダウンロードした「jquery.bxslider.min.js」と「jquery.bxslider.css」と「images」の3つをサーバにアップします。初心者はルートフォルダ(indexと同じ場所)にアップすればいいでしょう。

次に、「images」内にスライドショー用の画像をアップして、bxSliderを設置したい場所に下記のコードを記述します。画像のファイル名(pic1.jpg の部分)を間違えないようにしてくださいね。

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

最後に、</head>の直前に下記のコードを記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>

これでbxSliderが動くはずです。

bxSliderがIEで動かない場合の対処法

bxSliderはChromeやFirefoxで問題なく動作しても、IEだと動かない場合があります。

IEではjavascriptのコード解釈が他のブラウザと少し違うので、まずはそこをチェック、それでも動かない場合は、呼び出すjQueryのバージョンを変えてみてください。

こちらにbxSliderがIEで動かない場合の対処法を書きました。ご参考まで・・・

最後に注意点ですが、jQueryを複数使用すると、バッティングして動作がおかしくなる場合があります。

いわしはドロップダウンメニューを設置したサイトでbxSliderを使った時にトラブルが発生しました。どちらもjQueryを使うので、見事にバッティングしたみたいです。

結局、スライドショー側のjQuery呼び出しを消すことで解決しましたが、その際はjQueryのバージョン確認をお忘れなく。

上記のbxSliderがIEで動かなかったという事例は、jQueryのバージョンを変えたことが原因でした。それでもダメな場合は下記のサイトを参考にしてみてください。

http://stacktrace.jp/jquery/with_other_lib.html

jQueryと他のライブラリを同時に使用する方法 – jQuery – StackTrace

スポンサーリンク
PC用
PC用

フォローする

コメント

  1. tsukishimaao より:

    ありがとう、ありがとうです。おかげでシンプルなスライドショーにたどり着けました。

    • wind-mill_iwashiblog より:

      コメントありがとうございます。お役に立てたのなら光栄ですわ~(^^)

  2. ほうか より:

    bxSliderのスマホでのスライドの挙動がおかしいのですが、
    なにかお心当たりありますでしょうか?

    具体的に書きますと、例えば3枚の画像を設置して、
    ページャーを3コ設置しているのですが、

    1枚目以降のページャーをタップすると一瞬だけ表示して
    すぐに1枚目、

    と言いますか、記事自体をリロードしてしまいます。

    オプション等は特に設定していないのですが…

    • wind-mill_iwashiblog より:

      実際の挙動がわからないので何とも言えません・・・(^^;
      記事をリロードするってことは設置方法が間違ってるのかもしれませんね。
      URLは公開できませんか?
      あと、PCでは問題無く表示されるのでしょうか?

  3. LAWSONZ より:

    コード通りに書いたのですが、できませんでした。jsファイルの読み込ませ方が間違えてると思うので、記述の仕方を教えて下さい。下記がフォルダの階層です。
    akafujiフォルダ内に→cssフォルダ,imagesフォルダ,jsフォルダ,index.html
    cssフォルダ内に→ jquery.bxslider.css,style.css
    imagesフォルダ内に→画像ファイル
    jsフォルダ内に→imagesフォルダ,pluginsフォルダ,bower.json,jquery.bxslider.js,jquery.bxslider.min.js,jquery-3.1.0.min.js,readme.md
    jsフォルダ内の→ imagesフォルダ内に→ bx_loader.gif,controls.png
    jsフォルダ内の→ pluginsフォルダ内に→ jquery.easing.1.3.js,jquery.fitvids.js

    • wind-mill_iwashiblog より:

      bxsliderを使うために必要なファイルは「jquery.bxslider.min.js」と「jquery.bxslider.css」と「images」の3つだけです。
      これらを別々のフォルダに入れるのではなく、ルートフォルダにまとめてアップしてください。