[jQuery] jQuery簡単スライドショーbxsliderの使い方

  javascript, jQuery , , ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
jquery bxslider

今回、スライドショーの中でも最も有名な「bxslider」を扱ってみたいと思います。レスポンシブルデザインにも対応したjQueryのプラグインであるスライドショー「bxslider」の使い方をご紹介したいと思います。

jQueryプラグインbxsliderの使い方

bxslider サイト

jQuery本体の最新版のダウンロードを行って、下記のものを任意の場所に配置してください。注意点としては最新版を使用するようにしてください。

  • jquery-1.11.3.min.js

bxsliderプラグインサイトでbxslider一式のダウンロードを行って、zipファイルを展開・解凍をして下記のものを任意の場所に配置してください。

  • jquery.bxslider.css
  • jquery.bxslider.js
  • images/bx_loader.gif
  • images/controls.png

CSSファイルの参照

先ほどダウンロードした「jquery.bxslider.css」ファイルを任意の場所に配置して、head内にファイルの場所と対応させて下記を記述してください。これによりCSSファイルの参照を行います。

<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />

CSSファイルの画像参照

jquery.bxslider.css」ファイル内で参照している画像の参照の変更箇所を行番号・ハイライトで示しているので参考にして変更する場合は変更してください。合わせてしっかりと画像の参照に間違いがないか確認してください。
相対参照に間違いがあると、ローダー・コントローラーの画像が表示されませんので注意してください。

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(images/controls.png) no-repeat -43px -32px;
}
/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

HTMLの記述

HTMLファイル内のスライドショーを置きたい場所に下記を記述してください。ulのbxsliderクラスは後で示す「オプションの設定」に対応させてください。ファイルの参照・サイズ・altは任意で設定してください。

<div id="bxslider">
  <ul class="bxslider">
    <!--bxslider-->
    <li><img src="img/photo1.jpg" width="980" height="400" alt="スクリーン画像1" /></li>
    <li><img src="img/photo2.jpg" width="980" height="400" alt="スクリーン画像2" /></li>
    <li><img src="img/photo3.jpg" width="980" height="400" alt="スクリーン画像3" /></li>
    <li><img src="img/photo4.jpg" width="980" height="400" alt="スクリーン画像4" /></li>
    <li><img src="img/photo5.jpg" width="980" height="400" alt="スクリーン画像5" /></li>
  </ul>
  <!--bxslider--> 
</div>

javascriptファイルの参照

jQuery本体とbxsliderのjavascriptファイルの参照を下記のように記述してください。これによりjavascriptファイルを読み込める・利用できるようになります。

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

bxsliderのオプションの設定

下記のようにbxsliderのオプションの設定を記述してください。これによりオプションの初期設定を変更して利用することができるようになります。

<script type="text/javascript">
$(document).ready(function(){
  var obj = $('.bxslider').bxSlider({
    mode: 'vertical',
    speed: 800, //エフェクトのスピード
    auto: true,//自動再生有効
    slideWidth: 852, //スライドショーの幅
    pause: 5000,//表示間隔
    onSlideAfter: function () { obj.startAuto(); }//自動的に再開
  });
});
</script>

記述場所「head内」か「bodyの終了前」にjavascriptファイルの参照とbxsliderのオプションの設定をまとめて下記のように記述するようにしてください。
記述順序は「jQueryファイルの参照」⇒「bxsliderのjavascriptファイルの参照」⇒「オプションの設定」の順に記述するようにしてください。これはjQueryの機能を利用して、プラグインbxsliderを設定するオプションで実行するという流れのように記述します。

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var obj = $('.bxslider').bxSlider({
    mode: 'vertical',
    speed: 800, //エフェクトのスピード
    auto: true,//自動再生有効
    slideWidth: 852, //スライドショーの幅
    pause: 5000,//表示間隔
    onSlideAfter: function () { obj.startAuto(); }//自動的に再開
  });
});
</script>

下記に主要なbxsliderのオプションを示します。設定したいものにする際に参考にしてください。

オプション設定 オプション詳細 デフォルト
mode: ‘vertical’ スライドの種類:vertical(縦スライド)
horizontal(横スライド)
fade(フェード)
horizontal
slideWidth: 980 スライドショーの幅(ピクセル) 0
slideMargin: 0 スライド間の距離(マージン) 0
speed: 800 スライド動作の速度(ミリ秒) 500
pause: 5000 スライドの表示間隔(ミリ秒) 4000
captions: true・false キャプションとなるimgタグのtitle属性の表示の有効・無効 false
autoHover: true・false マウスオーバーすると一時停止の有効・無効 false
auto: true・false 自動再生の有効・無効 false
autoStart: true・false スタートボタンを押してから再生するかの有効・無効 true
pager: true・false ページャーの有無(黒丸) true
controls: true・false コントローラー矢印prev/next表示の有無 true
autoControls: true・false Stop・Startのコントロールの表示の有無 false
autoControlsCombine: true・false 実行中はStopのみ表示、停止中はStartのみ表示 false
infiniteLoop: true・false スライドのループの有効・無効 true
touchEnabled: true・false タッチ操作の有効・無効 true
responsive: true・false レスポンシブ対応の有効・無効 true
randomStart: true・false スライドのランダム表示の有効・無効 false
startSlide: 0 開始スライドの指定(0から開始) 0
minSlides: 1 表示するスライドの最低枚数 1
maxSlides: 1 表示するスライドの最大枚数 1

SNSでもご購読できます。

コメントを残す

*