jQuery

画像やカルーセルに利用できる多機能スライダーbxSliderの使い方

bxslider

今回は、画像(イメージ)スライダーやカルーセルスライダーとしても利用できる【bxSlider】の使い方のご紹介です。

こちらのjQueryプラグインは、スライダー系のプラグインの中ではとても使いやすく、便利な機能が詰まっているプラグインです。
実装もそんなに難しくないと思います。
ざっと下記にbxSliderの機能を書いてみました。

  • レスポンシブに対応
  • タッチスワイプ
  • 水平・垂直・フェードの機能
  • スライドに画像やビデオコンテンツを含める
  • カルーセルスライダーとしても設定できる

この他にも様々な機能などがあります。
一応、【bxSlider】を実際に利用したデモサイトもご用意いたしましたので、ご覧ください。

デモサイト

実際にこちらのプラグインを利用する場合は、下記より必要ファイルなどをダウンロードして下さい。

bxSlider

bxSlider 使い方

それでは、実際にbxSliderの実装をしていきたいと思います。
実装をする前にこちらから必要なファイルをダウンロードして下さい。

上記よりダウンロードしたフォルダの中から今回利用するファイルやフォルダ下記をご覧ください。

  • jquery.bxslider.min.js
  • jquery.bxslider.css
  • imagesフォルダ

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードしました【jquery.bxslider.min.js】と【jquery.bxslider.css】をhead要素内に読み込みます。
ファイルの階層などは、ご自身の環境に合わせて下さい。

<link rel="stylesheet" href="css/jquery.bxslider.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src="js/jquery.bxslider.min.js"></script>

HTML

次にHTMLなのですが、とてもシンプルでul要素でマークアップしbxsliderのクラス名記載します。

<ul class="bxslider">
  <li><img src="../chocolat/img/01.jpg" width="600px"></li>
  <li><img src="../chocolat/img/02.jpg" width="600px"></li>
  <li><img src="../chocolat/img/03.jpg" width="600px"></li>
  <li><img src="../chocolat/img/04.jpg" width="600px"></li>
</ul>

JavaScript

最後に上記ul要素のクラス名bxsliderを指定します。

<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>

上記まで記載すれば、実装の完了です。
そんなに難しい要素もなく初めて利用する方でもすんなり利用できるスライダー系プラグインだと思います。
また、実際にbxsliderを利用したデモサイトも用意しましたので、ご参考下さい。

デモサイト

オプション

bxsliderでは、様々なオプションが用意されております。
オプションを利用すれば、画像スライダーだけではなく、カルーセルとしても利用が出来ます。

bxslider1

下記に一部のオプションをご紹介させていただきますので、ご参考下さい。

キャプション・フェード効果・オート

  $('.bxslider2').bxSlider({
	  	auto: 'true', //オート
		autoControls: true, //コントロール
		speed: '250', //切り替わるスピード
		pause: '2000', //待機時間
	   	mode: 'fade', //'horizontal', 'vertical', 'fade'
  		captions: true //キャプション
	   });

キャプションは、title属性が表示されるようになっているようです。

垂直にスライド・ページャタイプ変更・イージング効果

<script src="js/jquery.easing.1.3.js"></script>
</head>

  $('.bxslider3').bxSlider({
	   	mode: 'vertical', //'horizontal', 'vertical', 'fade'
		pagerType: 'short', //ページャータイプを変更
		easing: 'ease-in', //jquery.easingを読み込む必要あり
  		speed: 2000 //切り替わるスピード
	   });

ページャータイプを【short】に変更すると数字がページャーとなります。
イージング効果を利用する場合は、【jquery.easing】を読み込む必要がありますのでご注意下さい。

カルーセル

  $('.bxslider5').bxSlider({
	auto:'ture',
        slideWidth: 200, //スライド内の1要素の幅
        maxSlides: 3, //一度に表示させる数
	minSlides: 3, //最低限表示させる数
	moveSlides:3, //スライドで動かす数
	   });

カルーセルスライダーの場合は、【slideWidth】と【maxSlides】必須となりますので、ご注意下さい。
上記の場合ですと、slideWidthで1つの要素の幅を200に設定しており、maxSlidesでカルーセルに一度に表示する数を3に設定しておりますので、【200 x 3 = 600がカルーセルの幅となります。 】

この他にもオプションの設定などありますので、下記リンク先をご確認下さい。

bxslider オプション

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

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

PREVIOUS large_11913623593

【WPプラグイン】Simple Login Lockdownで総当り攻撃を対策

NEXT wp-permalink

【WP】記事のパーマリンクを変更して重複が出た場合の対処