jQueryスライドショー「bxSlider」

【サンプルデモンストレーション】

レシポンシブWebデザインに対応しているスライドショーjQueryプラグイン体験第二弾です。

Camera」より、サッパリ!シンプル!で、なかなかイイ感じです。

まず、「bxSlider」でDownloadさせてもらいました。

サンプルを作ってみることに!

DownloadしたcssとjScriptファイルをアップ。

images > slides フォルダ内に、

  • yoko6.png
  • yoko7.png
  • yoko8.png
  • yoko9.png
  • yoko10.png

の5画像を入れてアップ。

demoフォルダの中にsample_bx.htmlファイルを作成。

</head> の直前に、

<link rel='stylesheet' href='../css/jquery.bxslider.css' type='text/css' media='all'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../scripts/jquery.bxslider.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	  $('.bxslider').bxSlider({
  auto: true,
  captions: true,
  pause: 2500
});
	});</script>

で、
body内に、

<div class="bxslider">
   <li><img src="../images/slides/yoko6.png" title="ヨコハマ君ねんね" /></li>
   <li><img src="../images/slides/yoko7.png" title="ヨコハマ君変身!" /></li>
   <li><img src="../images/slides/yoko8.png" title="ヨコハマ君準備体操" /></li>
   <li><img src="../images/slides/yoko9.png" title="ヨコハマ君雪だるま" /></li>
   <li><img src="../images/slides/yoko10.png" title="ヨコハマちゃん&ヨコハマ君 お茶飲む" /></li>
</div>

そして、
出来たのがこちら

【サンプルデモンストレーション】

サクッと、できました!!
(^-^)

Camera」は、デフォルトで自動再生でしたが、「bxSlider」は、オプションで設定しないと、自動では切り替わらないようです。

auto: true // デフォルトではfalseになってるようです。

キャプションも表示するには、

captions: true // デフォルトではfalseになってるようです。

1枚のイメージの表示時間を指定するには、

pause: 2500 // デフォルトでは4000のようです。

 

スライド動作は、横に動くか、縦に動くか、フェードアウト&フェードインの三種類のみのようですが、シンプルで、気軽に使用出来るjQueryですね。

< !DOCTYPE html>
<!-- Sample -->
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Sample_bxslider</title>
	<meta name="description" content="sample_bxslider"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<link rel='stylesheet' href='../css/jquery.bxslider.css' type='text/css' media='all'/>
	<style>
body {
	margin: 0;
	padding: 0;
}
.content {
	max-width: 1000px;
	width: 90%;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="../scripts/jquery.bxslider.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	  $('.bxslider').bxSlider({
  auto: true,
  captions: true,
  pause: 2500
});
	});</script>
	</head>
	<body>
    <div class="content">
      <div class="bxslider">
        <li><img src="../images/slides/yoko6.png" title="ヨコハマ君ねんね" /></li>
        <li><img src="../images/slides/yoko7.png" title="ヨコハマ君変身!" /></li>
        <li><img src="../images/slides/yoko8.png" title="ヨコハマ君準備体操" /></li>
        <li><img src="../images/slides/yoko9.png" title="ヨコハマ君雪だるま" /></li>
        <li><img src="../images/slides/yoko10.png" title="ヨコハマちゃん&ヨコハマ君 お茶飲む" /></li>
      </div>
    </div>
</body>
</html>

【参考サイト】
http://bxslider.com/options

Pocket