スライドショーのjQueryプラグイン「bxSlider.js」の組み込み

スライドショーのjQueryプラグイン「bxSlider.js」の組み込み

弊社のサイトでは利用していませんが、弊社のサイトのトップページで使っている「Glide.js」と同じような動作をするjQueryプラグインです。
スライドショー関係のjQueryプラグインは仕様に多少の違いはあっても、同じような動作をするプラグインが多いです。
ということで、ご都合にあわせてお選び頂くのがいいかもしれません。

対応ブラウザに違いがあったり、オプションの量に違いがあったり、動作の安定性違いがあったり、色々な違いがあります。
小さいことをつつきだすと、大概、何か出てきます（笑）

とは言っても、小さいことを言い出すとキリがないので、ここでは敢えてとりあげません。
ただ、本家サイトはご確認くださいね、という感じです。

bxSlider.jsの本家サイトです。
ダウンロードはGitHubにて出来ます。

• 本家
• GitHub

phptemp_bxslider_151208.zip

bxSlider.jsを組み込んだページのサンプルです。

• 組み込み済みサンプルページ

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. GitHubからダウロードしてきたファイルを展開する。
   展開した中から「 /dist/jquery.bxslider.js 」をWEBサイトテンプレート（PHP）内の「 /js/ 」に、「 /dist/jquery.bxslider.css 」を「 /css/ 」内にコピーする。
2. CSSと、メインhtmlソースをWEBサイトテンプレート（PHP）に書き込む。
3. JSファイル、CSSファイル、メインhtmlソースを書いたファイル、画像をアップする。

ということで、上記の内容を以下で詳細解説致します。

「 /disc/jquery.bxslider.js 」をそのままWEBサイトテンプレート（PHP）のjsフォルダに入れそのままアップして下さい。

jQueryファイルの指定は、最新版、若しくは動作確認の取れているjQueryが好ましいところです。
オープンに利用出来るソースが公開されていますので、そのファイルを直接指定して下さい。
サンプルページでは ajax.googleapis.com のファイルを直接指定しています。

次に main.css の修正です。

各種 main.css 3種の中の「メイン画像」の内容を修正しています。
ここでスライドする画像のサイズ（横幅）を決めると、その通りのサイズになります。

当サイトの配布テンプレートでは、 main.css の”メイン画像”、”パンくず”と、 jquery.bxslider.css 内の”.bx-wrapper”のマージンで隙間を調整しました。

CSSの次はhtmlソースの記述です。

htmlソースの中にJSの記述をしなければいけません。

<script type="text/javascript">
$(function(){
	$('#slider1').bxSlider({
		auto:true,
	});
});
</script>

上記の内容をメイン画像のスライドする箇所の近くに記述すればOKです。

また、この時に、スライドする親となる div 、ul には以下のように id を追記する必要があります。

<ul id="slider1">

GitHubからダウンロードしたフォルダの中に矢印アイコンなどの画像が入っています。
それらの画像についても適宜アップする必要があります。
「 /dist/images/ 」の中に入っている画像です。
jquery.bxslider.css の中でそれぞれの画像の位置を指定しています。
ですので、これらの画像を好きなディレクトリに設置する時は、 jquery.bxslider.css 内のディレクトリの指定も適宜修正しましょう。

当サイト内で配布しているテンプレートでは、新たに「 images 」ディレクトリをつくりそこに設置しました。
運用しやすいように修正してください。

CSSファイル、htmlファイル、jsファイル、画像のそれぞれをサーバーにアップして下さい。
あとは動作確認を取り、様々なケースでの記述を試して理解すれば、これにて作業完了です。

どこかに漏れがある時もありますので、動作確認はきっちりしましょう。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_151020.zip 」です。
• main.css（3種）の「メイン画像」の記述を修正しています。
• スライドショーはトップページのみですので、それぞれのファイルはトップページのみ読み込ませています。

比較的、簡単な組み込みで終了することが出来ました。
オプションは豊富に揃っているようですので、本家サイト内の「 Example 」にてご確認を頂くといいと思います。
いずれのオプションも少しだけ記述を追記するだけで出来てしまいます。

ただ、オプションを追記する時には場合によっては、「 jquery.easing.1.3.js 」を読み込ませる必要があったりするようです。
そのあたりは、臨機応変に対応してみてください。
これら必要なファイルは全てGitHubからダウンロードしたフォルダに入っていますので、そのあたりもきっちり確認してください。

執筆 : 清水 隼斗