HOME > コラム > WEB全般 > スライドショーのjQueryプラグイン「bxSlider.js」の組み込み

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

コラム

今回はスライドショーのjQueryプラグイン「bxSlider.js」の組み込みについて紹介致します。
当サイトで配布しているWEBサイトテンプレート(PHP)をサンプルに組み込んでいます。
もちろん、レスポンシブ対応です。
画像のサイズはCSSで自由に決めて使えるので、お手軽感のあるjQueryプラグインです。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

bxSlider.jsサイトイメージ
bxSlider.jsとは?
bxSlider.jsとは、jQueryを使ったスライドショーをつくるためのJavaScript

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

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

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

bxSlider.jsの配布サイト

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

ダウンロードと組み込みサンプル
bxSlider.js組み込み済みファイルのダウンロード
phptemp_bxslider_151208.zip
組み込み済みサンプル

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

元になるWEBサイトテンプレート(PHP)について

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

組み込み手順

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

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

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

bxSlider.jsファイルの移動とjQueryファイルの指定

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

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

CSSとhtmlソースとJSの記述

次に 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からダウンロードしたフォルダに入っていますので、そのあたりもきっちり確認してください。

執筆 : 清水 隼斗

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP