ホーム サンプルコード一覧 10. Icon Carousel

10. Icon Carousel

icon_carousel_capture1

実現される機能

タッチに対応したカルーセルUIを実現します。

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

基本デモ

現在地表示を◯で示します
画面に十分にカルーセルのアイテムが入る場合、ナビゲーションが非表示になります。

使用手順

以下の順で各JavaScriptファイルを読み込みます。

1. 依存ライブラリの読み込み

Icon Carouselが依存する、以下のライブラリを読み込みます。

<script src="../../common/js/jquery.min.js"></script>
<script src="../../common/js/underscore-min.js"></script>
<script src="../../common/js/backbone-min.js"></script>
<script src="libs/eveeve.min.js"></script>
<script src="libs/jquery.transit.min.js"></script>
<script src="libs/jquery.touchdragh.min.js"></script>

2. カルーセルコンフィグの読み込み

カルーセルの設定ファイルを読み込みます。カルーセルの設定を行うための諸々の設定はこのファイルに全て書かれています。

<script src="carouselconf.js"></script>

3. カルーセルのスクリプト読み込み

最後に、カルーセルのスクリプトを読み込みます。

<script src="script.js"></script>

4. カルーセルを配置するための要素を用意

ページ内に、カルーセルを配置するための要素を用意します。

<div class="mod-carousel" id="carousel"></div>

5. テンプレートのソースを用意

HTMLページ内に、カルーセルを出力するためのテンプレートを、以下のように用意します。このscript要素内のテキストは、カルーセルの内部のHTMLを拘置するために使われます。Underscore.jsのtemplate_.templateを使い、コンパイルが行われます。

<script type="text/x-template" id="carousel-tmpl">
  <div class="mod-carousel-widthkeeper">
    <div class="mod-carousel-pager mod-carousel-pager-left"><a href="#"><</a></div>
    <div class="mod-carousel-pager mod-carousel-pager-right"><a href="#">></a></div>
    <div class="mod-carousel-body"><div class="mod-carousel-body-inner">
      <% _(items).each(function(item){ %>
        <div class="mod-carousel-item"><a href="<%- item.href %>">
          <img src="<%- item.src %>" alt="<%- item.alt %>">
        </a></div>
      <% }); %>
    </div></div>
  </div>
  <div class="mod-carousel-dots"><!--
    <% _(items).each(function(){ %>
      --><div class="mod-carousel-dot"><span></span></div><!--
    <% }); %>
  --></div>
</script>

これで基本的な設定は終わりです。

設定ファイルの書き方

上記ステップで読み込んでいるcarouselconf.jsの内容は、以下のようになっています。

window.carouselconf = [
  {
    selector_uiRoot: '#carousel',
    selector_tmpl: '#carousel-tmpl',
    items: [
      {
        src: 'imgs/1.png',
        alt: 'alt text',
        href: 'http://example.com'
      },
      {
        src: 'imgs/2.png',
        alt: 'alt text',
        href: 'http://example.com'
      },
      ...(略)
    ]
  }
];

ここで指定している値はそれぞれ、以下の意味を持ちます。

window.carouselconf

カルーセルの設定を格納する配列。複数のカルーセルを使いたい場合、この配列に複数のオブジェクトを入れます。

selector_uiRoot

前述の使用手順4で配置した要素を示すセレクタを指定します。

selector_tmpl

前述の使用手順5で配置した要素を示すセレクタを指定します。

items

カルーセルが内包する画像の情報を配列として持ちます。この配列にはオブジェクトが入り、このオブジェクトは、以下の情報を持ちます。

src

画像のパス

alt

画像のalt

href

リンク先のURL

より細かい設定方法

アイテムの高さ、幅、マージンを変更したい場合、script.js及びstyle.css内の、以下の箇所を調節してください。

script.js

app.config = {
  sideMargin: 80, /* 左右のマージン */
  itemWidth: 115, /* アイテムの幅 */
  spaceBetween: 10, /* アイテム間のマージン */
  maxCount: 10 /* 最大アイテム数 */
};

style.css

.mod-carousel-widthkeeper {
  ...
  height:97px; /* カルーセルコンテナの高さ */
}
...
.mod-carousel-item {
  width:115px; /* アイテムの幅 */
  height:97px; /* アイテムの高さ */
  margin:0 0 0 10px; /* アイテム感のマージン */
  ...
}

よりカスタマイズしたい場合は、必要に応じて使用手順5のHTMLソース、style.css内のCSSを編集してください。

カルーセルをより自由に使いたい場合は、本スケルトンが依存する jQuery.touchdragh を直接ご利用ください。