はじめに
最強のイメージスライダーbxSliderを試してみるでは、イメージスライダーのbxSliderを紹介しました。今回は、bxSliderと同様にコンテンツのスライダーも可能なLightSliderを試してみます。
2014年06月25日 20時56分
最強のイメージスライダーbxSliderを試してみるでは、イメージスライダーのbxSliderを紹介しました。今回は、bxSliderと同様にコンテンツのスライダーも可能なLightSliderを試してみます。
作業の前提条件は、下記のとおりです。
| ソフトウエア | バージョン |
|---|---|
| OS | Windows 7 Ultimate 32bit |
| Cygwin | Setup Version 2.831 |
LightSliderは、ul要素に任意のIDセレクタ指定するだけで使用できます。
設置に必要なアーカイブをダウンロードし、解凍します。
$ cd /tmp $ wget -q https://github.com/sachinchoolur/lightslider/archive/master.zip $ unzip -q master.zip $ mv lightslider-master/lightSlider . $ rm -f master.zip $ rm -fr lightslider-master
lightSlider.cssを指定します。
<link rel="stylesheet" href="lightSlider/css/lightSlider.css">
jquery.lightSlider.min.jsを指定します。
<script src="lightSlider/js/jquery.lightSlider.min.js"></script>
ul要素に任意のIDセレクタを使用して、コンテンツを作成します。
<ul id="image-slider"> <li><img src="img/056-01.jpg" alt="/"></li> </ul>
LightSliderのロードを行うJavaScriptを追加します。
<script>
$(function() {
$("#image-slider").lightSlider({
gallery: false,
minSlide:1,
maxSlide:1,
auto:true,
mode:'fade',
pager:true,
controls:true,
useCSS:true,
currentPagerPosition:'middle'
});
});
</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>069</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="lightSlider/css/lightSlider.css">
<style>
body {
margin-top: 80px;
}
.navbar {
background: #9f945f;
height: 50px;
border: 0;
}
section {
text-align: left;
min-height: 420px;
background: #dbd070;
margin: 0;
padding: 5px 5px 0px; 5px;
}
ul { list-style-type: none; }
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header"></div>
<div class="navbar-collapse collapse"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<ul id="image-slider">
<li><img src="img/056-01.jpg" alt="/"></li>
<li><img src="img/056-02.jpg" alt="/"></li>
<li><img src="img/056-04.jpg" alt="/"></li>
<li><img src="img/056-05.jpg" alt="/"></li>
<li><img src="img/056-06.jpg" alt="/"></li>
</ul>
</div>
<div class="col-md-6">
<ul id="content-slider">
<li>
<section>
<h4>写真ACで見つけた草原の写真です。</h4>
</section>
</li>
<li>
<section>
<h4>写真ACで見つけたレインボーブリッジの写真です。</h4>
</section>
</li>
<li>
<section>
<h4>写真ACで見つけた向日葵の写真です。</h4>
</section>
</li>
<li>
<section>
<h4>足成で見つけた月の写真です。</h4>
</section>
</li>
<li>
<section>
<h4>写真ACで見つけた夜空の写真です。</h4>
</section>
</li>
</ul>
</div>
</div><!-- row -->
</div><!-- container -->
<script src="bootstrap.min.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script src="lightSlider/js/jquery.lightSlider.min.js"></script>
<script>
$(function() {
$("#image-slider").lightSlider({
gallery: false,
minSlide:1,
maxSlide:1,
auto:true,
mode:'fade',
pager:true,
controls:true,
useCSS:true,
currentPagerPosition:'middle'
});
$("#content-slider").lightSlider({
gallery: false,
minSlide:1,
maxSlide:1,
auto:true,
mode:'fade',
pager:true,
controls:true,
useCSS:true,
currentPagerPosition:'middle'
});
});
</script>
</body>
</html>