ぷにおちゃん～シンプルで軽量なイメージライダーNivo Sliderを試してみる

はじめに

Nivo Sliderは、シンプルなイメージスライダーです。元々はWordPressのイメージスライダーとして開発されていますが、Bootstrap 3でも使用できます。

前提条件

作業の前提条件は、下記のとおりです。

ソフトウエア	バージョン
OS	Windows 7 Ultimate 32bit
Cygwin	Setup Version 2.831

Nivo Sliderの使用方法

環境設定

設置に必要なアーカイブをダウンロードし、解凍します。

$ 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

CSSファイルの指定
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">
```

jsファイルの指定

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>

JavaScriptの指定

Nive Sliderのロードを行うJavaScriptを追加します。

<script>
  $(function() {
    $('#slider').nivoSlider();
  });
</script>

059.html

<!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>

デモは、059.htmlからご覧頂けます。

ファイルは、059.zipからダウンロードできます。

Table of Contents

シンプルで軽量なイメージライダーNivo Sliderを試してみる

はじめに

前提条件

Nivo Sliderの使用方法