最強のイメージスライダーbxSliderを試してみる(1)

2014年05月17日 13時53分

201405171353HCSW00.png

はじめに

bxSliderは、シンプルかつ高機能なイメージスライダーです。Bootstrap 3と共存させて使用できます。

前提条件

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

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

bxSliderの使用方法

  1. 環境設定

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

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

    jquery.bxslider.cssを指定します。 

    <link href="bxslider-4/jquery.bxslider.css" rel="stylesheet">
  3. jsファイルの指定

    bxslider-4/jquery.bxslider.jsを指定します。 

    <script src="bxslider-4/jquery.bxslider.js"></script>
  4. コンテンツの作成

    bxSliderでは、ul要素に任意のIDを指定して、コンテンツを作成します。 

    <ul class="bxslider">
  <li><img src="img/056-01.jpg" alt="/" title="草原"></li>
</ul>
  5. JavaScriptの指定

    bxSliderのロードを行うJavaScriptを追加します。
    ここでは、イメージの自動スライド、キャプション表示、イメージ高の自動調整を指定しています。 

    <script>
  $(function() {
    $('.bxslider').bxSlider({
      auto: true,
      adaptiveHeight: true,
      captions: true
    });
  });
</script>
    060.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>060</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;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <h4>イメージスライダー</h4>
          <ul class="bxslider">
            <li><img src="img/056-01.jpg" alt="/" title="草原"></li>
            <li><img src="img/056-02.jpg" alt="/" title="レインボーブリッジ"></li>
            <li><img src="img/056-03.jpg" alt="/" title="マンハッタン"></li>
            <li><img src="img/056-04.jpg" alt="/" title="向日葵"></li>
            <li><img src="img/056-05.jpg" alt="/" title="月"></li>
            <li><img src="img/056-06.jpg" alt="/" title="夜空"></li>
          </ul>
        </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({
          auto: true,
          adaptiveHeight: true,
          captions: true
        });
      });
    </script>
  </body>
</html>
    デモは、060.htmlからご覧頂けます。
    ファイルは、060.zipからダウンロードできます。

▲