画像のスライドショーを簡単に設置出来るjQueryプラグイン「bxslider」の利用方法をご紹介します。

「bxslider」の特徴

• WEB上に簡単に画像のスライドショーを設置出来ます。
• オプションが豊富なので多彩な設定が可能です。
• スマートフォンでのフリック操作にも対応しています。

「bxslider」の導入手順

1. bxsliderのダウンロードページにアクセスします。
   ⇒http://bxslider.com/
2. ダウンロードしたファイルの内、必要となるのは以下の通りです。
   

   分類	ファイル名　or フォルダ名	パス	備考
   js	jquery-1.10.2.js		jQuery本体 ※ダウンロードしたファイル内には含まれていないので「http://jquery.com/download/」などから入手して下さい
   js	jquery.bxslider.min.js	\jquery.bxslider
   css	jquery.bxslider.css	\jquery.bxslider
   画像	images	\jquery.bxslider	cssファイルと同一ディレクトリ化に設置して下さい。

3. サンプルソース「HTML」
   
   XHTML

   <link rel='stylesheet' type='text/css' href='./css/jquery.bxslider.css' /> <script type="text/javascript" charset="utf-8" src="./js/jquery-1.10.2.js"></script> <script type="text/javascript" charset="utf-8" src="./js/jquery.bxslider.min.js" ></script>

   1 2 3

   <link rel='stylesheet' type='text/css' href='./css/jquery.bxslider.css' /> <script type="text/javascript" charset="utf-8" src="./js/jquery-1.10.2.js"></script> <script type="text/javascript" charset="utf-8" src="./js/jquery.bxslider.min.js" ></script>

   
   
   XHTML

   <ul id="bxsliderSample1"> <li><img src="./img/sample_img_001.jpg" title="sample画像1"/></li> <li><img src="./img/sample_img_002.jpg" title="sample画像2"/></li> <li><img src="./img/sample_img_003.jpg" title="sample画像3"/></li> <li><img src="./img/sample_img_008.jpg" title="sample画像8"/></li> </ul>

   1 2 3 4 5 6

   <ul id="bxsliderSample1">   <li><img src="./img/sample_img_001.jpg" title="sample画像1"/></li>   <li><img src="./img/sample_img_002.jpg" title="sample画像2"/></li>   <li><img src="./img/sample_img_003.jpg" title="sample画像3"/></li>   <li><img src="./img/sample_img_008.jpg" title="sample画像8"/></li> </ul>

4. サンプルソース「jQuery」
   
   JavaScript

   jQuery(function($) { // 画像をスライド表示指定 jQuery('#bxsliderSample1').bxSlider({ auto: true, }); });

   1 2 3 4 5 6

   jQuery(function($) { // 画像をスライド表示指定 jQuery('#bxsliderSample1').bxSlider({ auto: true, }); });

5. 指定可能なオプション

実行サンプル