jquery.bxslider　スライダープラグイン
jquery.bxslider.js

レスポンシブコンテンツスライダー・カルーセルスライダーのjquery.bxslider.js

Posted on by 大窪 将弘

jquery.bxslider.js

今やjquery.bxslider.jsは超有名で、私もよく使います。KURUBUSI.netのサイトでも使用しています。
設置も簡単ですし、オプションも多くレスポンシブ対応ですので、レスポンシブサイトを作るときにも重宝しています。
今回、KURUBUSI.netサイトで、このjquery.bxslider.jsを使用して、WordPressでAJAXでコンテンツを持ってくるカスタマイズを行いましたので、そちらの記事を紹介する前に、基本的な設置の方法と、どんなことが出来るのかを復習がてら書いていきたいと思います。

設置方法

必要ファイルのダウンロード

まずはbxslider.comのオフィシャルサイトかGithubのサイトから、一式をダウンロードしてください。

zipファイルを解凍したら色々入っていますが、最低限必要な物は下記のものだけ。

  • jquery.bxslider.css（もしくはjquery.bxslider.min.css）
  • jquery.bxslider.js（もしくはjquery.bxslider.min.js）
  • bx_loader.gif
  • controls.png

必要ファイル読み込み

コレを下記の感じでheadに書きます。
jqueryはきっともう入っているでしょうけどなかったら、下記の感じでgoogleとかから持ってきましょうね

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

因みにWodPressを使用している人は、headに直接書き込んでいるとちょっとかっこ悪いですのでwp_head();で吐き出すようにしたほうがかっこよいですよ。
それに関してははコチラで→WPでjsの追加cssの読み込みはwp_head()から

画像の設定

jquery.bxslider.jsでデフォルトで用意されている画像をお好みの場所に保存しましょう。

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

まあこんな感じですかね。
そうすると、画像の保存場所によって、jquery.bxslider.cssで指定されている場所とずれてしまっている可能性がありますので、その場合はjquery.bxslider.cssを一部修正します。

jquery.bxslider.cssの修正するコード【OPEN↓】
/* jquery.bxslider.css 54行目位 */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('images/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* jquery.bxslider.css 101行目位 */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('images/controls.png') no-repeat 0 -32px;
}
/* jquery.bxslider.css 107行目位 */
.bx-wrapper .bx-next {
  right: 10px;
  background: url('images/controls.png') no-repeat -43px -32px;
}
/* jquery.bxslider.css 132行目位 */
.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;
}
/* jquery.bxslider.css 146行目位 */
.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;
}

ふぅっ…結構多かったですね、全部書く必要なかったんですが、ついっ…
まあ、とりあえずjquery.bxslider.css内でcontrols.pngとbx_loader.gif内で検索かけるか置き換えして、cssとimageの場所がずれていたら直してくださいね。

使い方

jquery.bxslider.jsは、コンテンツスライダーにも画像スライダーにもカルーセルスライダーにもなりますが、ここでは一番簡単な画像のスライダーを作ってみます。

html

↓こんな感じ

<ul id="bxslider">
	<li><img src="" title="" alt="" /></li>
	<li><img src="" title="" alt="" /></li>
	<li><img src="" title="" alt="" /></li>
	<li><img src="" title="" alt="" /></li>
</ul>

呼び出し

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

これが一番簡単な呼び出し方です。$(document).ready(function(){});の中にこのように書くと下記のようになります。

  • OKWaveやfacebookの用にスクロールするとサイドバーが固定されるようになるjavascript
  • windowをスクロールして対象が画面内に入ったらclassを変更するjavascript
  • で、結論は？結論まで読み飛ばしスクリプト
  • ドロワーメニューって色々配布してるけど、カスタマイズが不自由だし何と干渉するか分からないから、KURUBUSIでドロワーメニュー作ってみました。

因みに、wordpressを使っている人は、$がコンフリクトを回避する為に使えなくなっていますので、こんな感じで書きましょう。

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

WordPressでのソースの読み込み方とかはコチラ→WPでscriptをheader.phpに直接書き込むのはちょっとかっこ悪い

基本的な設置の仕方がわかったので、次からはjquery.bxslider.jsが用意してくれている沢山のオプションを使用して、色々な使い方のサンプルを書いていきましょう。
コピペOK!

オプションを変えた色々なサンプル

jquery.bxslider.jsには、様々なオプションが用意されています。
jquery.bxslider.jsのオプションに関しましては、コチラのページに全てまとめていますので、参考にして下さい。
jquery.bxslider.jsオプション

横スクロール・縦スクロール・フェイドが出来る

jquery.bxslider.jsは、横スクロールだけではなく、縦スクロールやフェイド等の表現も可能です。また、title要素に入れた文章をオーバーレイするような設定もあります。

呼び出しのコード

$('#single_bxslider4').bxSlider({
	mode: 'fade',            //モードをフェイドに
	hideControlOnEnd: true,  //スライダーが端までスクロールしたら矢印を消す
	easing: 'ease-in-out',   //イージングの変更
	captions: true,          //titleタグを画像に重ねる
	auto: true,              //自動再生
	pause: 2000,             //200ミリ秒ごとにスライド
});

HTML

htmlも一応載せておきますね。

HTMLを見る【OPEN↓】
<ul id="single_bxslider4">
	<li><img src="https://kurubusi.net/wp-content/uploads/2015/06/mainimg.jpg" title="OKWaveやfacebookの用にスクロールするとサイドバーが固定されるようになるjavascript" width="616" height="410" class="alignnone size-full wp-image-778" /></li>
	<li><img src="https://kurubusi.net/wp-content/uploads/2015/05/430_600_82.jpg" title="windowをスクロールして対象が画面内に入ったらclassを変更するjavascript" width="616" height="410" class="alignnone size-full wp-image-629" /></li>
	<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.skip_articles_eye-catch.jpg" title="で、結論は？結論まで読み飛ばしスクリプト" width="616" height="410" class="alignnone size-full wp-image-282" /></li>
	<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.responsive_menu_eye-catch1.jpg" title="ドロワーメニューって色々配布してるけど、カスタマイズが不自由だし何と干渉するか分からないから、KURUBUSIでドロワーメニュー作ってみました。" width="616" height="410" class="alignnone size-full wp-image-40" /></li>
</ul>

カルーセルスライダーのティッカーモード

電光掲示板の様にずっと流れ続けるバージョンです。また、メリーゴーランドのように並んで回るカルーセルスライダーにしてあります。

呼び出しのコード

$('#single_bxslider5').bxSlider({
	maxSlides: 3,       //画面に表示される最高要素数
	slideWidth: 200,    //一つの要素の幅
	ticker: true,       //ティッカーモードにする
	speed: 4000,        //スライドのスピードを4000ミリ秒にする
});

HTML

HTMLを見る【OPEN↓】
<ul id="single_bxslider5">
	<li><img src="https://kurubusi.net/wp-content/uploads/2015/06/mainimg.jpg" title="OKWaveやfacebookの用にスクロールするとサイドバーが固定されるようになるjavascript" width="616" height="410" class="alignnone size-full wp-image-778" /></li>
	<li><img src="https://kurubusi.net/wp-content/uploads/2015/05/430_600_82.jpg" title="windowをスクロールして対象が画面内に入ったらclassを変更するjavascript" width="616" height="410" class="alignnone size-full wp-image-629" /></li>
	<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.skip_articles_eye-catch.jpg" title="で、結論は？結論まで読み飛ばしスクリプト" width="616" height="410" class="alignnone size-full wp-image-282" /></li>
	<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.responsive_menu_eye-catch1.jpg" title="ドロワーメニューって色々配布してるけど、カスタマイズが不自由だし何と干渉するか分からないから、KURUBUSIでドロワーメニュー作ってみました。" width="616" height="410" class="alignnone size-full wp-image-40" /></li>
</ul>

コンテンツスライダーにする

画像ではなく、このようにコンテンツを入れる様な機会は凄く多いと思います。
レスポンシブのcssの変更はうまい具合に各々やってみてください。KURUBUSI.netのTOPでも、このような形で記事の紹介をしています。

呼び出しのコード

$('#single_bxslider2').bxSlider({
	maxSlides: 3,       //画面に表示する最大要素数
	moveSlides: 3,      //一回のスクロールで動かす要素数
	slideWidth: 200,    //一つの要素の幅
	slideMargin: 10,    //要素間のマージン1
});

HTML

html凄い長いですけども気になる方は・・・面倒なんで普通はPHPとかで書きましょうね。

HTMLを見る【OPEN↓】
<div id="single_bxslider2">
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-fixed_column/"><img width="300" height="200" src="https://kurubusi.net/wp-content/uploads/2015/06/mainimg-300x200.jpg" class="attachment-medium size-medium wp-post-image" alt="OKWaveやfacebookの用にスクロールするとサイドバーが固定されるようになるjavascript" srcset="https://kurubusi.net/wp-content/uploads/2015/06/mainimg-300x200.jpg 300w, https://kurubusi.net/wp-content/uploads/2015/06/mainimg.jpg 616w" sizes="(max-width: 300px) 100vw, 300px" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-fixed_column/">【クラス名を付けるだけ】ページをスクロールしてもサイドバーが切れないように固定する方法</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/javascript">javascript</a></li><li><a href="https://kurubusi.net/tag/kurubusi-fixed_column">kurubusi-fixed_column</a></li><li><a href="https://kurubusi.net/tag/wordpress">WordPress</a></li><li><a href="https://kurubusi.net/tag/event">イベント</a></li><li><a href="https://kurubusi.net/tag/sidebar">サイドカラム（サイドバー）</a></li><li><a href="https://kurubusi.net/tag/scroll">スクロール</a></li><li><a href="https://kurubusi.net/tag/responsive">レスポンシブ</a></li></ul></div></dd>
		</dl>
	</article>
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/javascript-free/watchscroll/"><img width="300" height="200" src="https://kurubusi.net/wp-content/uploads/2015/05/430_600_82-300x200.jpg" class="attachment-medium size-medium wp-post-image" alt="windowをスクロールして対象が画面内に入ったらclassを変更するjavascript" srcset="https://kurubusi.net/wp-content/uploads/2015/05/430_600_82-300x200.jpg 300w, https://kurubusi.net/wp-content/uploads/2015/05/430_600_82.jpg 616w" sizes="(max-width: 300px) 100vw, 300px" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/javascript-free/watchscroll/">windowをスクロールして対象が画面内に入ったらclassを変更するjavascript</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/javascript">javascript</a></li><li><a href="https://kurubusi.net/tag/kflyoutdiv">kFlyOutDiv</a></li><li><a href="https://kurubusi.net/tag/watchscroll">WatchScroll</a></li><li><a href="https://kurubusi.net/tag/animation">アニメーション</a></li><li><a href="https://kurubusi.net/tag/effect">エフェクト</a></li></ul></div></dd>
		</dl>
	</article>
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/javascript-free/kflyoutdiv/"><img width="300" height="199" src="https://kurubusi.net/wp-content/uploads/2014/10/canstockphoto21336859-300x199.jpg" class="attachment-medium size-medium wp-post-image" alt="イベントとかでstyle変更するjavascript" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/javascript-free/kflyoutdiv/">イベントでstyleを変更するjavascript</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/javascript">javascript</a></li><li><a href="https://kurubusi.net/tag/kflyoutdiv">kFlyOutDiv</a></li><li><a href="https://kurubusi.net/tag/animation">アニメーション</a></li><li><a href="https://kurubusi.net/tag/event">イベント</a></li><li><a href="https://kurubusi.net/tag/effect">エフェクト</a></li><li><a href="https://kurubusi.net/tag/need_more_consideration_plug-in">プラグイン・javascript化検討</a></li><li><a href="https://kurubusi.net/tag/function">関数</a></li></ul></div></dd>
		</dl>
	</article>
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/wordpress-plug-in/krc-cast-manager/"><img width="300" height="200" src="https://kurubusi.net/wp-content/uploads/2015/05/krc-cast-manager_eye-catch-300x200.jpg" class="attachment-medium size-medium wp-post-image" alt="WordPress プラグイン　風俗用在席管理システム" srcset="https://kurubusi.net/wp-content/uploads/2015/05/krc-cast-manager_eye-catch-300x200.jpg 300w, https://kurubusi.net/wp-content/uploads/2015/05/krc-cast-manager_eye-catch.jpg 616w" sizes="(max-width: 300px) 100vw, 300px" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/wordpress-plug-in/krc-cast-manager/">風俗サイト用：在席キャスト管理WordPressプラグイン</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/krc-cast-manager">krc-cast-manager</a></li><li><a href="https://kurubusi.net/tag/wordpress">WordPress</a></li><li><a href="https://kurubusi.net/tag/wp%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3">WPプラグイン</a></li></ul></div></dd>
		</dl>
	</article>
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-slider/"><img width="300" height="199" src="https://kurubusi.net/wp-content/uploads/2014/10/canstockphoto21336859-300x199.jpg" class="attachment-medium size-medium wp-post-image" alt="イベントとかでstyle変更するjavascript" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-slider/">スライダー　jQueryに依存しない何かと使えるレスポンシブスライダー</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/javascript">javascript</a></li><li><a href="https://kurubusi.net/tag/responsive_menu">responsive_menu</a></li><li><a href="https://kurubusi.net/tag/menu">メニュー</a></li><li><a href="https://kurubusi.net/tag/responsive">レスポンシブ</a></li><li><a href="https://kurubusi.net/tag/function">関数</a></li></ul></div></dd>
		</dl>
	</article>
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-skip_articles/"><img width="300" height="199" src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.skip_articles_eye-catch-300x199.jpg" class="attachment-medium size-medium wp-post-image" alt="で、結論は？結論まで読み飛ばしスクリプト" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-skip_articles/">結論まで読み飛ばし機能　kurubusi.skip_articles.js</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/javascript">javascript</a></li><li><a href="https://kurubusi.net/tag/kurubusi_busy">KURUBUSIで使用中</a></li><li><a href="https://kurubusi.net/tag/skip_articles">skip_articles</a></li><li><a href="https://kurubusi.net/tag/responsive">レスポンシブ</a></li></ul></div></dd>
		</dl>
	</article>
</div>

コンテンツスライダーカルーセルな感じ

上のサンプルとほとんど同じなんですが、オプションをちょっと変えると、一度にスライドする要素数が変わります。
結構こういう小さな設定って色々な場面で使用する際には助かるオプションですよね。

呼び出しのコード

$('#single_bxslider3').bxSlider({
	maxSlides: 3,        //表示される最大要素数
	moveSlides: 1,       //一度にスライドする要素数
	slideWidth: 200,     //要素の幅
	slideMargin: 10,     //スライド間のマージン
	auto: true,          //自動再生をON
	easing: 'ease-in',   //イージングタイプ変更
	pause: 3000,         //自動再生のタイミングを3000ミリ秒にする
});

HTML

長いですけどHTMLも載せておきます。。。

HTMLを見る【OPEN↓】
<div id="single_bxslider3">
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-fixed_column/"><img width="300" height="200" src="https://kurubusi.net/wp-content/uploads/2015/06/mainimg-300x200.jpg" class="attachment-medium size-medium wp-post-image" alt="OKWaveやfacebookの用にスクロールするとサイドバーが固定されるようになるjavascript" srcset="https://kurubusi.net/wp-content/uploads/2015/06/mainimg-300x200.jpg 300w, https://kurubusi.net/wp-content/uploads/2015/06/mainimg.jpg 616w" sizes="(max-width: 300px) 100vw, 300px" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-fixed_column/">【クラス名を付けるだけ】ページをスクロールしてもサイドバーが切れないように固定する方法</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/javascript">javascript</a></li><li><a href="https://kurubusi.net/tag/kurubusi-fixed_column">kurubusi-fixed_column</a></li><li><a href="https://kurubusi.net/tag/wordpress">WordPress</a></li><li><a href="https://kurubusi.net/tag/event">イベント</a></li><li><a href="https://kurubusi.net/tag/sidebar">サイドカラム（サイドバー）</a></li><li><a href="https://kurubusi.net/tag/scroll">スクロール</a></li><li><a href="https://kurubusi.net/tag/responsive">レスポンシブ</a></li></ul></div></dd>
		</dl>
	</article>
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/javascript-free/watchscroll/"><img width="300" height="200" src="https://kurubusi.net/wp-content/uploads/2015/05/430_600_82-300x200.jpg" class="attachment-medium size-medium wp-post-image" alt="windowをスクロールして対象が画面内に入ったらclassを変更するjavascript" srcset="https://kurubusi.net/wp-content/uploads/2015/05/430_600_82-300x200.jpg 300w, https://kurubusi.net/wp-content/uploads/2015/05/430_600_82.jpg 616w" sizes="(max-width: 300px) 100vw, 300px" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/javascript-free/watchscroll/">windowをスクロールして対象が画面内に入ったらclassを変更するjavascript</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/javascript">javascript</a></li><li><a href="https://kurubusi.net/tag/kflyoutdiv">kFlyOutDiv</a></li><li><a href="https://kurubusi.net/tag/watchscroll">WatchScroll</a></li><li><a href="https://kurubusi.net/tag/animation">アニメーション</a></li><li><a href="https://kurubusi.net/tag/effect">エフェクト</a></li></ul></div></dd>
		</dl>
	</article>
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/javascript-free/kflyoutdiv/"><img width="300" height="199" src="https://kurubusi.net/wp-content/uploads/2014/10/canstockphoto21336859-300x199.jpg" class="attachment-medium size-medium wp-post-image" alt="イベントとかでstyle変更するjavascript" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/javascript-free/kflyoutdiv/">イベントでstyleを変更するjavascript</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/javascript">javascript</a></li><li><a href="https://kurubusi.net/tag/kflyoutdiv">kFlyOutDiv</a></li><li><a href="https://kurubusi.net/tag/animation">アニメーション</a></li><li><a href="https://kurubusi.net/tag/event">イベント</a></li><li><a href="https://kurubusi.net/tag/effect">エフェクト</a></li><li><a href="https://kurubusi.net/tag/need_more_consideration_plug-in">プラグイン・javascript化検討</a></li><li><a href="https://kurubusi.net/tag/function">関数</a></li></ul></div></dd>
		</dl>
	</article>
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/wordpress-plug-in/krc-cast-manager/"><img width="300" height="200" src="https://kurubusi.net/wp-content/uploads/2015/05/krc-cast-manager_eye-catch-300x200.jpg" class="attachment-medium size-medium wp-post-image" alt="WordPress プラグイン　風俗用在席管理システム" srcset="https://kurubusi.net/wp-content/uploads/2015/05/krc-cast-manager_eye-catch-300x200.jpg 300w, https://kurubusi.net/wp-content/uploads/2015/05/krc-cast-manager_eye-catch.jpg 616w" sizes="(max-width: 300px) 100vw, 300px" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/wordpress-plug-in/krc-cast-manager/">風俗サイト用：在席キャスト管理WordPressプラグイン</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/krc-cast-manager">krc-cast-manager</a></li><li><a href="https://kurubusi.net/tag/wordpress">WordPress</a></li><li><a href="https://kurubusi.net/tag/wp%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3">WPプラグイン</a></li></ul></div></dd>
		</dl>
	</article>
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-slider/"><img width="300" height="199" src="https://kurubusi.net/wp-content/uploads/2014/10/canstockphoto21336859-300x199.jpg" class="attachment-medium size-medium wp-post-image" alt="イベントとかでstyle変更するjavascript" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-slider/">スライダー　jQueryに依存しない何かと使えるレスポンシブスライダー</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/javascript">javascript</a></li><li><a href="https://kurubusi.net/tag/responsive_menu">responsive_menu</a></li><li><a href="https://kurubusi.net/tag/menu">メニュー</a></li><li><a href="https://kurubusi.net/tag/responsive">レスポンシブ</a></li><li><a href="https://kurubusi.net/tag/function">関数</a></li></ul></div></dd>
		</dl>
	</article>
	<article>
		<dl class="taglist_1">
			<dt class="taglist_img"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-skip_articles/"><img width="300" height="199" src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.skip_articles_eye-catch-300x199.jpg" class="attachment-medium size-medium wp-post-image" alt="で、結論は？結論まで読み飛ばしスクリプト" /></a></dt>
			<dd class="taglist_title"><a href="https://kurubusi.net/products/free/javascript-free/kurubusi-skip_articles/">結論まで読み飛ばし機能　kurubusi.skip_articles.js</a><div class="taglist_tag"><ul><li class="glyphicon glyphicon-tag" aria-hidden="true"></li><li><a href="https://kurubusi.net/tag/javascript">javascript</a></li><li><a href="https://kurubusi.net/tag/kurubusi_busy">KURUBUSIで使用中</a></li><li><a href="https://kurubusi.net/tag/skip_articles">skip_articles</a></li><li><a href="https://kurubusi.net/tag/responsive">レスポンシブ</a></li></ul></div></dd>
		</dl>
	</article>
</div>

サムネイル付きのスライダーにしてみる

画像スライダーの中では、スライダーの中の要素を自動的にサムネイルにしてくれるものもあるんですけど、jquery.bxslider.jsでやるなら下記のような感じです。
HTMLにこうやって書くとちょっと面倒くさいですけど、phpとかで関数作ってやれば面倒くさいこともないかなと…
素直に違うスライダー探せという説もありますが…

  • ホームページを訪れるユーザーのパターン
  • WordPress プラグイン　風俗用在席管理システム
ホームページを訪れるユーザーのパターンWordPress プラグイン　風俗用在席管理システム

呼び出しのコード

$('#single_bxslider8').bxSlider({
	pagerCustom: '#single_bxslider8-pager'   //ページ送りを#single_bxslider8-pagerにする
});

HTML

なんかぐちゃぐちゃですけど…

HTMLを見る【OPEN↓】
		<ul id="single_bxslider8">
			<li><img src="https://kurubusi.net/wp-content/uploads/2015/06/mainimg.jpg" title="OKWaveやfacebookの用にスクロールするとサイドバーが固定されるようになるjavascript" width="616" height="410" class="alignnone size-full wp-image-778" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2015/05/430_600_82.jpg" title="windowをスクロールして対象が画面内に入ったらclassを変更するjavascript" width="616" height="410" class="alignnone size-full wp-image-629" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.skip_articles_eye-catch.jpg" title="で、結論は？結論まで読み飛ばしスクリプト" width="616" height="410" class="alignnone size-full wp-image-282" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.responsive_menu_eye-catch1.jpg" title="ドロワーメニューって色々配布してるけど、カスタマイズが不自由だし何と干渉するか分からないから、KURUBUSIでドロワーメニュー作ってみました。" width="616" height="410" class="alignnone size-full wp-image-40" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/users_pattern1.jpg" alt="ホームページを訪れるユーザーのパターン" width="616" height="410" class="alignnone size-full wp-image-213" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2015/05/krc-cast-manager_eye-catch.jpg" alt="WordPress プラグイン　風俗用在席管理システム" width="616" height="410" class="alignnone size-full wp-image-514" /></li>
		</ul>
		<div id="single_bxslider8-pager">
			<a data-slide-index="0" href="" style="float:left;width:15%;margin-right:1%;display:block;"><img src="https://kurubusi.net/wp-content/uploads/2015/06/mainimg.jpg" title="OKWaveやfacebookの用にスクロールするとサイドバーが固定されるようになるjavascript" width="616" height="410" class="alignnone size-full wp-image-778" /></a><a data-slide-index="1" href="" style="float:left;width:15%;margin-right:1%;display:block;"><img src="https://kurubusi.net/wp-content/uploads/2015/05/430_600_82.jpg" title="windowをスクロールして対象が画面内に入ったらclassを変更するjavascript" width="616" height="410" class="alignnone size-full wp-image-629" /></a><a data-slide-index="2" href="" style="float:left;width:15%;margin-right:1%;display:block;"><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.skip_articles_eye-catch.jpg" title="で、結論は？結論まで読み飛ばしスクリプト" width="616" height="410" class="alignnone size-full wp-image-282" /></a><a data-slide-index="3" href="" style="float:left;width:15%;margin-right:1%;display:block;"><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.responsive_menu_eye-catch1.jpg" title="ドロワーメニューって色々配布してるけど、カスタマイズが不自由だし何と干渉するか分からないから、KURUBUSIでドロワーメニュー作ってみました。" width="616" height="410" class="alignnone size-full wp-image-40" /></a><a data-slide-index="4" href="" style="float:left;width:15%;margin-right:1%;display:block;"><img src="https://kurubusi.net/wp-content/uploads/2014/10/users_pattern1.jpg" alt="ホームページを訪れるユーザーのパターン" width="616" height="410" class="alignnone size-full wp-image-213" /></a><a data-slide-index="5" href="" style="float:left;width:15%;margin-right:1%;display:block;"><img src="https://kurubusi.net/wp-content/uploads/2015/05/krc-cast-manager_eye-catch.jpg" alt="WordPress プラグイン　風俗用在席管理システム" width="616" height="410" class="alignnone size-full wp-image-514" /></a>
		</div>

まぁこのように～
オプションをうまい具合に使えば、お客様のあんな一言、かる～いのりのご提案などにも細かく対応できるかもしれません。
用意されているオプションに関しては、下記のページにまとめてありますので、参考にしてみてください。
jquery.bxslider.jsオプション

次は、もうちょっと高度なコールバックやパブリックメソッドを使ったサンプルをご紹介いたします。

コールバックやパブリックメソッドを利用したサンプル

パブリックメソッドを使ったサンプル

用意されているパブリックメソッドを使って、ボタンをクリックするというイベントに対して、スライダーに色々な変化を加えるようなサンプルを書いてみました。
パブリックメソッドを提供してくれるおかげで、色々な応用の幅が広がりそうですね。

縦スクロール
フェイド
横スクロール
自動再生をストップ
自動再生を再開
突然カルーセルスライダーに変身させる
バルス
アレイズ

呼び出しのコード

一気に長くなります。

呼び出しソースを見る【OPEN↓】
$('#single_bxslider4').bxSlider({
var single_bxslider6 = $('#single_bxslider6').bxSlider({  //普通のスライダーを用意
	mode: 'horizontal',
	auto: true,
	pause: 1000,
});
$( '#horizontal' ).on( 'click', function (e) { //ボタンクリックで
	e.preventDefault();               //とりあえずイベントをキャンセル
	single_bxslider6.reloadSlider( {  //新しいオプションを入れてスライダーをリロード
		mode: 'horizontal',
		auto: true,
		pause: 1000,
	} );
} );
$( '#vertical' ).on( 'click', function (e) {
	e.preventDefault();               //とりあえずイベントをキャンセル
	single_bxslider6.reloadSlider( {  //新しいオプションを入れてスライダーをリロード
		mode: 'vertical',
		auto: true,
		pause: 1000,
	} );
} );
$( '#fade' ).on( 'click', function (e) {
	e.preventDefault();               //とりあえずイベントをキャンセル
	single_bxslider6.reloadSlider( {  //新しいオプションを入れてスライダーをリロード
		mode: 'fade',
		auto: true,
		pause: 1000,
	} );
} );
$( '#stopAuto' ).on( 'click', function (e) {
	single_bxslider6.stopAuto();               //自動再生をスタップ
} );
$( '#startAuto' ).on( 'click', function (e) {
	single_bxslider6.startAuto();               //自動再生をスタート
} );
$( '#tyoureload' ).on( 'click', function (e) {
	e.preventDefault();
	single_bxslider6.reloadSlider( {  //新しいオプションを入れてスライダーをリロード
		minSlides: 1,
		maxSlides: 3,
		moveSlides: 1,
		slideWidth: 200,
		slideMargin: 10,
		auto: true,
		easing: 'ease-in',
		pause: 1000,
	} );
} );
$( '#bans' ).on( 'click', function (e) {
	single_bxslider6.destroySlider();  //スライダーのjsを一切読んでない状態に戻します。
} );
$( '#areiz' ).on( 'click', function (e) {
	single_bxslider6.reloadSlider(    //やっぱりスライダーにします
		mode: 'horizontal',
		auto: true,
		pause: 1000,
	} );
} );
});

HTML

htmlも一応載せておきますね。

HTMLを見る【OPEN↓】
		<ul id="single_bxslider6">
			<li><img src="https://kurubusi.net/wp-content/uploads/2015/06/mainimg.jpg" title="OKWaveやfacebookの用にスクロールするとサイドバーが固定されるようになるjavascript" width="616" height="410" class="alignnone size-full wp-image-778" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2015/05/430_600_82.jpg" title="windowをスクロールして対象が画面内に入ったらclassを変更するjavascript" width="616" height="410" class="alignnone size-full wp-image-629" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.skip_articles_eye-catch.jpg" title="で、結論は？結論まで読み飛ばしスクリプト" width="616" height="410" class="alignnone size-full wp-image-282" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.responsive_menu_eye-catch1.jpg" title="ドロワーメニューって色々配布してるけど、カスタマイズが不自由だし何と干渉するか分からないから、KURUBUSIでドロワーメニュー作ってみました。" width="616" height="410" class="alignnone size-full wp-image-40" /></li>
		</ul>
		<div class="t_center">
			<div id="vertical" class="balloon-5-bottom mt10" >縦スクロール</div><div id="fade" class="balloon-5-bottom mt10">フェイド</div><div id="horizontal" class="balloon-5-bottom mb10">横スクロール</div><div id="stopAuto" class="balloon-5-bottom mt10">自動再生をストップ</div><div id="startAuto" class="balloon-5-bottom mt10">自動再生を再開</div><div id="tyoureload" class="balloon-5-bottom mt10">突然カルーセルスライダーに変身させる</div><div id="bans" class="balloon-5-bottom mt10">バルス</div><div id="areiz" class="balloon-5-bottom mt10">アレイズ</div>
		</div>

コールバックを使ったサンプル

右にスライドする・左にスライドする・読み込まれる等のタイミングでコールバック関数が実行できるようになっています。
Ajax等、カスタマイズする為にはこういうコールバックはとても助かります。
ちょっとわかりづらいかもしれませんがイベント発生のタイミングで文字が表示されるようなサンプルを作ってみました。

  • OKWaveやfacebookの用にスクロールするとサイドバーが固定されるようになるjavascript
  • windowをスクロールして対象が画面内に入ったらclassを変更するjavascript
  • で、結論は？結論まで読み飛ばしスクリプト
  • ドロワーメニューって色々配布してるけど、カスタマイズが不自由だし何と干渉するか分からないから、KURUBUSIでドロワーメニュー作ってみました。

呼び出しのコード

$( '#single_bxslider7' ).bxSlider( {
	onSliderLoad: function () {
		$( '#bxslider7message' ).prepend("スライドが表示されました<br>");
	},
	onSlideBefore: function () {
		$( '#bxslider7message' ).prepend("スライドしますよー！<br>");
	},
	onSlideAfter: function () {
		$( '#bxslider7message' ).prepend("はい！スライドしました。<br>");
	},
	onSlideNext: function () {
		$( '#bxslider7message' ).prepend("右にまいりまーす<br>");
	},
	onSlidePrev: function () {
		$( '#bxslider7message' ).prepend("左にまいりまーす<br>");
	}
} );

HTML

htmlも一応載せておきますね。

HTMLを見る【OPEN↓】
		<ul id="single_bxslider7">
			<li><img src="https://kurubusi.net/wp-content/uploads/2015/06/mainimg.jpg" alt="OKWaveやfacebookの用にスクロールするとサイドバーが固定されるようになるjavascript" width="616" height="410" class="alignnone size-full wp-image-778" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2015/05/430_600_82.jpg" alt="windowをスクロールして対象が画面内に入ったらclassを変更するjavascript" width="616" height="410" class="alignnone size-full wp-image-629" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.skip_articles_eye-catch.jpg" alt="で、結論は？結論まで読み飛ばしスクリプト" width="616" height="410" class="alignnone size-full wp-image-282" /></li>
			<li><img src="https://kurubusi.net/wp-content/uploads/2014/10/kurubusi.responsive_menu_eye-catch1.jpg" alt="ドロワーメニューって色々配布してるけど、カスタマイズが不自由だし何と干渉するか分からないから、KURUBUSIでドロワーメニュー作ってみました。" width="616" height="410" class="alignnone size-full wp-image-40" /></li>
		</ul>
		<p id="bxslider7message" style="height:200px;background-color: #f5f8ff;color: #000;font-size: 1.2rem;padding:5px;border: solid 1px #333;overflow: scroll"></p>

まとめ・次回予告

ま、このように～。
色々なオプションが有りますので、応用が効き、カスタマイズがしやすくとても重宝しているjquery.bxslider.js。
次はこのjquery.bxslider.jsを使って、AjaxでWordPressのコンテンツを取得していくやり方をご紹介しますね。
はぁ。意外と時間っかかった汗

著者

kurubusi.net