ホーム サンプルコード一覧 7. Text Carousel

7. Text Carousel

実現される機能

スワイプで切り替え可能なニュースのカルーセルUIを作ることができます。

ダウンロード

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

デモ

基本デモ

ページ上部にあるUIが、該当のUIです。
このUIをタッチすると、指の動きに合わせてアイテムが切り替わります。

使用手順

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

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

<script src="[yourDirectoryHere]/jquery.min.js"></script>
<script src="[yourDirectoryHere]/jquery.transit.min.js"></script>
<script src="[yourDirectoryHere]/eveeve.min.js"></script>
<script src="[yourDirectoryHere]/jquery.touchdragh.min.js"></script>

Text Carouselのライブラリである、jquery.newscarousel.js を読み込みます。

<script src="[yourDirectoryHere]/jquery.newscarousel.js"></script>

2. 必要な要素を用意

カルーセルを表現する要素をページ内に用意します。
デモでは、以下の様なHTMLになっています。

<div class="su-m-newsCarousel">
  <div class="su-m-newsCarousel__bd">
    <div class="su-m-newsCarousel__bdInner">
      <section class="su-m-newsCarousel__item"><a href="http://example.com">
        <h1>2014-02-28</h1>
        <p>アーカイブ機能が追加されました</p>
      </a></section>
      <section class="su-m-newsCarousel__item"><a href="http://example.com">
        <h1>2014-02-20</h1>
        <p>キャンペーン情報を追加!</p>
      </a></section>
      <section class="su-m-newsCarousel__item"><a href="http://example.com">
        <h1>2014-01-15</h1>
        <p>一覧が使いやすくなりました!</p>
      </a></section>
      <section class="su-m-newsCarousel__item"><a href="http://example.com">
        <h1>2014-01-12</h1>
        <p>既知の問題が修正されました</p>
      </a></section>
      <section class="su-m-newsCarousel__item"><a href="http://example.com">
        <h1>2014-01-01</h1>
        <p>最新OSに対応しました</p>
      </a></section>
    </div>
  </div>
  <a class="su-m-newsCarousel__buttonL su-m-newsCarousel__button--disabled"><span></span></a>
  <a class="su-m-newsCarousel__buttonR su-m-newsCarousel__button--disabled"><span></span></a>
<!-- /su-m-newsCarousel --></div>

このコード内において、.su-m-newsCarousel__itemが、一つのアイテムを表現します。アイテムの数ぶんだけ、この要素を繰り返します。

3. カルーセルの適用

上記要素がページ内に存在している時、以下を実行します。

$('.su-m-newsCarousel').su_newsCarousel();

.su-m-newsCarouselに対し、カルーセルが適用されます。

より細かいカスタマイズ

各要素のセレクタを変更したい場合等、より細かいカスタマイズを行いたい場合は、jquery.newscarousel.jsの中身を直接編集してください。

このスケルトンは、jQuery.touchdraghに依存しています。このスケルトンが提供する以上の機能を実装したい場合は、直接jQuery.touchdraghを利用してください。