amp-carousel

カルーセル
カルーセルです。画像をスワイプでもなんでもしてしゃしゃっと見ることができます。

プラグインの読み込み

amp-carouselを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。

  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

基本構文と動作

どんな書き方でどんな動きすんのかを。まず簡単なものを。

<amp-carousel width="450"
  height="300">
  <amp-img src="images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>

超賢い。
正直デフォルトのこんなんだけでもすっごい良いんじゃないか？って感じです。

動作デモ

デモ

各種プロパティについて

type	親要素のamp-carouselタグにつけれるプロパティです。何も指定内場合は【carousel】扱いとなり【slides】に変更ができます。また、それぞれの違いについては以下 carousel すべてのスライドが表示され、水平方向にスクロール可能です。じわじわ動かすことができます。 slides 一度に1つのスライドを表示しますこっちはきっちりとしたスライド！って感じです。まぁ大きくは変わりないですけどねｗ
height必須	親要素のamp-carouselタグにつけるプロパティでカルーセルの高さを指定します。必須ですよ！
controls	親要素のamp-carouselタグにつけるプロパティ。モバイル端末でカルーセル移動用の左右のボタンを表示させる場合に付与します。
data-next-button-aria-label	親要素のamp-carouselタグにつけるプロパティ。次へボタンにaria-labelをつけます。指定方法は以下 data-next-button-aria-label="次のスライドを見る"
data-prev-button-aria-label	親要素のamp-carouselタグにつけるプロパティ。前へボタンにaria-labelをつけます。指定方法は以下 data-prev-button-aria-label="前のスライドを見る"
autoplay	親要素のamp-carouselタグにつけるプロパティ。自動再生をさせます。次スライドの表示までのデフォルトは5秒となります。 type="slides"の設定の場合のみ有効。自動再生を行う場合は最低３つのスライドが必要となります。
delay	親要素のamp-carouselタグにつけるプロパティ。 autoplayが有効になっている時、次スライド表示までの秒数を変更できます。指定方法はJSと同じ感覚で。(1秒=1000) 指定方法は以下 delay="3000"
loop	親要素のamp-carouselタグにつけるプロパティ。ループして表示させる場合は付与します。 type="slides"の設定の場合のみ有効。

特定のスライドに進みたい

順番にじゃなくて特定の所を表示したい的な場合は以下のようにします。

<amp-carousel width="450"
  height="300" type="slides" controls autoplay id="carousel-with-preview">
  <amp-img src="/common/img/illust/1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/common/img/illust/2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/common/img/illust/3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>
<div class="carousel-preview">
  <a href="javascript:void(0);" on="tap:carousel-with-preview.goToSlide(index=0)">
    <amp-img src="/common/img/illust/1.jpg"
      width="60"
      height="40"
      alt="apples"></amp-img>
  </a>
  <a href="javascript:void(0);" on="tap:carousel-with-preview.goToSlide(index=1)">
    <amp-img src="/common/img/illust/2.jpg"
      width="60"
      height="40"
      alt="lemons"></amp-img>
  </a>
  <a href="javascript:void(0);" on="tap:carousel-with-preview.goToSlide(index=2)">
    <amp-img src="/common/img/illust/3.jpg"
      width="60"
      height="40"
      alt="blueberries"></amp-img>
  </a>
</div>

メインのスライダにIDを付与→移動させるトリガーつけたい要素に対して、on=～～を付与するだけとなります。
ちなみにこれも、type="slides"の設定の場合のみ有効となります。
指定するindexは0が先頭となります。