Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

jQueryプラグイン 使いやすいスライドショー　bxSlider

jQueryプラグイン

今回は、jQueryプラグインの「bxSlider」について書きます。


bxSliderを使うと、スライドショーを簡単に設置できます。

f:id:gupuru:20140325221702p:plain

さらに、カスタマイズ豊富で、フリック、スワイプにも対応しています。


導入方法を書きます。

①ダウンロード
こちらの公式サイトからダウンロードできます。
http://bxslider.com/
f:id:gupuru:20140325222010p:plain

ダウンロードして解凍（zipで送られてきます）します。
フォルダの中身は、こんな感じです↓
f:id:gupuru:20140325222155p:plain
使うのは、「jquery.bxslider.min.js」と「jquery.bxslider.css」です。


②読み込み
「jquery.bxslider.min.js」と「jquery.bxslider.css」を読み込みます。（jqueryを忘れないように（笑））
<head>〜</head>の間に、このような感じで書きます↓

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="jquery.bxslider.min.js"></script>

<link href="jquery.bxslider.css" rel="stylesheet" />


③画像
スライドショーに使用する画像を用意します。
このような形で書きます↓

<ul class="bxslider">
  <li><img src="/images/picture1.jpg" /></li>
  <li><img src="/images/picture2.jpg" /></li>
  <li><img src="/images/picture3.jpg" /></li>
  <li><img src="/images/picture4.jpg" /></li>
</ul>

「<ul class="bxslider">」の「bxslider」を忘れないように。
これを忘れると、動きません。


④jQuery
jQueryの部分は、このような形で書きます。

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


これで導入完了です。あとは、実行するだけ！

サンプルのプログラムも書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>bxSlider</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="jquery.bxslider.min.js"></script>
	<link href="jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
	<h1>bxSliderのテスト</h1>

<ul class="bxslider">
			 <li>
			    	<img src="photo.jpg" >
			  </li>
			  <li>
			    	<img src="photo.jpg" >
			  </li>
			  <li>
			    	<img src="photo.jpg">
			  </li>
			  <li>
			    	<img src="photo.jpg">
			  </li>
		</ul>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
</body>
</html>

実行結果
f:id:gupuru:20140325223427p:plain


補足ですが・・・
上の実行結果の写真の左右に矢印のようなアイコンがあると思います。
こちらのアイコンは、ダウンロードしたフォルダのなかの「images」という所にあります。
このアイコンを使用する場合は、「jquery.bxslider.css」を置いている場所に「images」を置いてください。
f:id:gupuru:20140325224151p:plain



bxSliderには、たくさんのオプションがあります。
こちらのサイトに詳しく説明されています↓
jQueryプラグイン「bxSlider」がレスポンシブ対応になってた | スターフィールド株式会社

ここでは、一部紹介します。

  • slideWidth

スライドショーの横幅を調整できます。

$(document).ready(function(){
  $('.bxslider').bxSlider({
        slideWidth:340
        });
});
  • speed

スライドのアニメーションの時間を調節できます。

$(document).ready(function(){
  $('.bxslider').bxSlider({
        slideWidth:340,
        speed: 600
        });
});
  • mode

スライドショーの向きを調整できます。
「horizontal（水平方向）」, 「vertical（垂直方向）」, 「fade（消える）」の３つあります。

$(document).ready(function(){
  $('.bxslider').bxSlider({
        mode:'fade'
        });
});


以上で、終わります。

参考サイト
jQueryプラグイン「bxSlider」がレスポンシブ対応になってた | スターフィールド株式会社
jQuery Content Slider | Responsive jQuery Slider | bxSlider