軽量なイメージスライダーElastislideを試してみる

2014年06月26日 19時43分

201406261943HCSW00.png

前提条件

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

ソフトウエアバージョン
OSWindows 7 Ultimate 32bit
CygwinSetup Version 2.831

Elastislideの使用方法

LightSliderは、ul要素に任意のIDセレクタ指定するだけで使用できます。

  1. 環境設定

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

    $ cd /tmp
$ wget -q https://github.com/codrops/Elastislide/archive/master.zip
$ unzip -q master.zip
$ mv Elastislide-master Elastislide
$ rm -f master.zip
  2. CSSファイルの指定

    elastislide.cssを指定します。 

    <link rel="stylesheet" href="Elastislide/css/elastislide.css">
  3. jsファイルの指定

    jquery.elastislide.jsおよび、modernizr.custom.17475.jsを指定します。 

    <script src="Elastislide/js/modernizr.custom.17475.js"></script>
<script src="Elastislide/js/jquery.elastislide.js"></script>
  4. コンテンツの作成

    ul要素に任意のIDセレクタを使用して、コンテンツを作成します。 

    <ul id="carousel" class="elastislide-list">
	<li><img src="img/056-01.jpg" alt="/"></li>
</ul>
  5. JavaScriptの指定

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

    <script>
	$(function() {
		$("#carousel").elastislide({
			minItems: 2
		});
	});
</script>
    070.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>070</title>

    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="Elastislide/css/elastislide.css">
    <style>
      body {
        margin-top: 80px;
      }
      .navbar {
        background: #9f945f;
        height: 50px;
        border: 0;
      }
    </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-12">
          <ul id="carousel" class="elastislide-list">
            <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><!-- row -->
    </div><!-- container -->

    <script src="bootstrap.min.js"></script>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="Elastislide/js/modernizr.custom.17475.js"></script>
    <script src="Elastislide/js/jquery.elastislide.js"></script>
    <script>
      $(function() {
        $("#carousel").elastislide({
          minItems: 2
        });
      });
    </script>
  </body>
</html>
    デモは、070.htmlからご覧頂けます。
    ファイルは、070.zipからダウンロードできます。

▲