モバイル対応のカルーセルプラグインのslickを試してみる

2014年06月08日 22時08分

201406082208HCSW00.png

はじめに

clickは、 イメージやテキストのカルーセル表示を行うことができるJqueryプラグインです。なお、sclickは、スマホやタブレットなどのスワイプ操作にも対応しています。

前提条件

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

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

slickの使用方法

slickは、テキストまたは、イメージに対して、任意のクラス名を指定するだけで使用できます。

  1. 環境設定

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

    $ cd /tmp/demo
$ wget -q https://github.com/kenwheeler/slick/archive/master.zip
$ unzip -q master.zip
$ rm -f master.zip
$ cp -pr slick-master/slick .
$ rm -fr slick-master
  2. CSSファイルの指定

    slick.cssを指定します。 

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

    slick.min.jsを指定します。 

    <script src="slick/slick.min.js"></script>
  4. コンテンツの作成

    テキストに任意のクラス名を指定して、コンテンツを作成します。 

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

    TextEffectのロードを行うJavaScriptを追加します。
    ここでは、オートプレイ、イメージ表示数:1、イメージ表示時間:2秒を指定しています。 

    <script>
  $(function() {
    $('.example').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      dots: true,
      arrows: false
    });
  });
</script>
    064.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>064</title>

    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="slick/slick.css">

    <style>
      body { background: #888; margin-top: 50px; }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <div class="example">
            <div><img src="img/056-01.jpg" alt="/" title="草原"></div>
            <div><img src="img/056-02.jpg" alt="/" title="レインボーブリッジ"></div>
            <div><img src="img/056-04.jpg" alt="/" title="向日葵"></div>
            <div><img src="img/056-05.jpg" alt="/" title="月"></div>
            <div><img src="img/056-06.jpg" alt="/" title="夜空"></div>
          </div>
        </div><!-- col-6 -->
        <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="slick/slick.min.js"></script>
    <script>
      $(function() {
        $('.example').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 2000,
          dots: true,
          arrows: false
        });
      });
    </script>
  </body>
</html>
    デモは、064.htmlからご覧頂けます。
    ファイルは、064.zipからダウンロードできます。

▲