はじめに
最強のイメージスライダーbxSliderを試してみる(1)では、イメージスライダーとして使用しましたが、bxSliderはイメージだけで無くHTMLコンテンツのスライドにも対応しています。今回は、bxSliderをコンテンツスライダーとして使用します。
2014年05月24日 22時01分
最強のイメージスライダーbxSliderを試してみる(1)では、イメージスライダーとして使用しましたが、bxSliderはイメージだけで無くHTMLコンテンツのスライドにも対応しています。今回は、bxSliderをコンテンツスライダーとして使用します。
作業の前提条件は、下記のとおりです。
| ソフトウエア | バージョン |
|---|---|
| OS | Windows 7 Ultimate 32bit |
| Cygwin | Setup Version 2.831 |
bxSliderをコンテンツスライダーとして使用する場合、ul要素では無くdiv要素でコンテンツを記述するだけです。
div要素に任意のIDを指定して、コンテンツを作成します。
<ul class="bxslider"> <li><img src="img/056-01.jpg" alt="/" title="草原"></li> </ul>
bxSliderのロードを行うJavaScriptを追加します。
<script>
$(function() {
$('.bxslider').bxSlider();
});
</script>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>061</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bxslider-4/jquery.bxslider.css" rel="stylesheet">
<style>
body { background: #888; margin-top: 50px; }
.bx-wrapper .bx-viewport {
background: #888;
border: 5px solid #888;
box-shadow: 0 0 5px #888;
}
h4 { color: #fff; }
article { padding: 0px 50px; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="bxslider">
<div class="slide">
<article>
<h4>Chapter 1</h4>
<p>写真ACで見つけた草原の写真です。</p>
<img src="img/056-01.jpg" alt="/" title="草原">
</article>
</div>
<div class="slide">
<article>
<h4>Chapter 2</h4>
<p>写真ACで見つけたレインボーブリッジの写真です。</p>
<img src="img/056-02.jpg" alt="/" title="レインボーブリッジ">
</article>
</div>
<div class="slide">
<article>
<h4>Chapter 3</h4>
<p>写真ACで見つけたマンハッタンの写真です。</p>
<img src="img/056-03.jpg" alt="/" title="マンハッタン">
</article>
</div>
<div class="slide">
<article>
<h4>Chapter 4</h4>
<p>写真ACで見つけた向日葵の写真です。</p>
<img src="img/056-04.jpg" alt="/" title="向日葵">
</article>
</div>
<div class="slide">
<article>
<h4>Chapter 5</h4>
<p>足成で見つけた月の写真です。</p>
<img src="img/056-05.jpg" alt="/" title="月">
</article>
</div>
<div class="slide">
<article>
<h4>Chapter 6</h4>
<p>写真ACで見つけた夜空の写真です。</p>
<img src="img/056-06.jpg" alt="/" title="夜空">
</article>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div><!-- row -->
</div><!-- container -->
<script src="bootstrap.min.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script src="bxslider-4/jquery.bxslider.js"></script>
<script>
$(function() {
$('.bxslider').bxSlider();
});
</script>
</body>
</html>