はじめに
Nivo Sliderは、シンプルなイメージスライダーです。元々はWordPressのイメージスライダーとして開発されていますが、Bootstrap 3でも使用できます。
2014年05月10日 08時04分
Nivo Sliderは、シンプルなイメージスライダーです。元々はWordPressのイメージスライダーとして開発されていますが、Bootstrap 3でも使用できます。
作業の前提条件は、下記のとおりです。
| ソフトウエア | バージョン |
|---|---|
| OS | Windows 7 Ultimate 32bit |
| Cygwin | Setup Version 2.831 |
設置に必要なアーカイブをダウンロードし、解凍します。
$ cd /tmp/demo $ wget https://github.com/gilbitron/Nivo-Slider/archive/master.zip $ unzip -q master.zip $ rm -f master.zip $ mv Nivo-Slider-master Nivo-Slider
nivo-slider.cssおよび、dark.cssを指定します。
Nivo Sliderには、default/light/darkの３つのテーマが用意されており、好きなテーマを指定することができます。
<link href="Nivo-Slider/themes/dark/dark.css" rel="stylesheet"> <link href="Nivo-Slider/nivo-slider.css" rel="stylesheet">
jquery.nivo.slider.jsを指定します。
<script src="superslides/dist/jquery.superslides.min.js"></script>
Nivo Sliderでは、下記のクラスおよび、セレクタを指定して、コンテンツを作成します。
| クラス/セレクタ | 概要 |
|---|---|
| slider-wrapper | イメージスライダーのラッパークラスです。 |
| nivoSlider | スライダーに表示するイメージ画像を定義するクラスです。 |
| slider | Nivo Sliderが処理すべきイメージのIDを定義します。IDセレクタは任意のIDで構いません。 |
<div class="slider-wrapper theme-dark">
<div id="slider" class="nivoSlider">
<a href="#">
<img class="img-responsive" src="img/056-01.jpg" alt="/" title="草原">
</a>
</div>
</div>
Nive Sliderのロードを行うJavaScriptを追加します。
<script>
$(function() {
$('#slider').nivoSlider();
});
</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>059</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="Nivo-Slider/themes/dark/dark.css" rel="stylesheet">
<link href="Nivo-Slider/nivo-slider.css" rel="stylesheet">
<style>
body { background: #888; margin-top: 50px; }
</style>
</head>
<body>
<div id="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="slider-wrapper theme-dark">
<div id="slider" class="nivoSlider">
<a href="#">
<img class="img-responsive" src="img/056-01.jpg" alt="/" title="草原">
</a>
<a href="#">
<img class="img-responsive" src="img/056-02.jpg" alt="/" title="レインボーブリッジ">
</a>
<a href="#">
<img class="img-responsive" src="img/056-03.jpg" alt="/" title="マンハッタン">
</a>
<a href="#">
<img class="img-responsive" src="img/056-04.jpg" alt="/" title="向日葵">
</a>
<a href="#">
<img class="img-responsive" src="img/056-05.jpg" alt="/" title="月">
</a>
<a href="#">
<img class="img-responsive" src="img/056-06.jpg" alt="/" title="夜空">
</a>
</div>
</div>
</div><!-- col-md -->
<div class="col-md-3"></div>
</div><!-- row -->
</div><!-- container -->
<script src="jquery-1.10.2.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="Nivo-Slider/jquery.nivo.slider.js"></script>
<script>
$(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>