<amp-carousel> - カルーセルを設置する
公開日:
AMPのamp-carouselは、カルーセルを設置するための要素です。カルーセルは、複数の画像をスライドして1枚ずつ表示するUIです。画像ギャラリーを設置したい場合に有用です。
概要
- 名前
- amp-carousel
- 可用性
- Stable (安定)
- サポートするレイアウト
- fill,fixed,fixed-height,flex-item,nodisplay,responsive
- 必要なスクリプト
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
- 検証
- https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/0.1/validator-amp-carousel.protoascii
- ドキュメント
- https://www.ampproject.org/docs/reference/extended/amp-carousel.html
属性
autoplay
この属性を付けると、自動再生になる。画像が変わる秒数はデフォルトでは5000ミリ秒だが、delay属性で変更できる。type属性にslides
を指定した場合にだけ有効。論理属性。
controls
この属性を付けると、画像をスライドするためのボタンが表示される。ボタンがない場合、タッチデバイスではスワイプして操作することになる。タッチデバイス以外では、指定する、しないに関わらず強制的にボタンが表示される。論理属性。
delay
指定例: 3000
autoplayが有効な場合、自動で画像が切り替わる秒数を、ミリ秒単位で指定する。
height
指定例: 150
高さ。
loop
この属性を付けると、ループしてめくり続けられる。type属性にslides
を指定した場合にだけ有効。論理属性。
type
カルーセルの種類をキーワードで指定する。slides
の方が確実に画像1枚1枚を表示できるので、個人的にオススメです。
- carousel
- 1つの画面に複数の画像が見えることがある。サポートするlayout属性は
fixed
、fixed-height
、nodisplay
。 - slides
- 1つの画面に1枚の画像しか入らない。サポートするlayout属性は
fill
、fixed
、fixed-height
、flex-item
、nodisplay
、responsive
。
共通属性
AMPの全てのタグで利用できる共通属性を指定できます。
説明
ライブラリの読み込み
amp-carouselを利用するには、専用のライブラリを読み込む必要があります。
HTML
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
基本的な使い方
画像の用意
カルーセルでスライドさせたい画像をamp-img要素で用意して下さい。上から順番に表示されます。
HTML
<amp-img src="/image/photo/1.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/2.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/3.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/4.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/5.jpg" width="300" height="225"></amp-img>
amp-carouselで囲む
用意した画像をamp-carousel要素で囲むだけで、カルーセルになります。カルーセルは高さの指定が必須なのでご注意下さい。画像の高さと合うようにしないと、表示がおかしくなってしまいます。
HTML
<amp-carousel controls width="300" height="225">
<amp-img src="/image/photo/1.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/2.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/3.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/4.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/5.jpg" width="300" height="225"></amp-img>
</amp-carousel>
スタイリング
セレクタ
戻るボタン、進むボタンなど、カルーセルの各UIは下記のセレクタでスタイルシートを適用できます。
- amp-carousel
- カルーセル全体。
- .amp-carousel-button
- 戻るボタンと進むボタン。
- .amp-carousel-button-prev
- 戻るボタン。
- .amp-carousel-button-next
- 進むボタン。
- .amp-carousel-slide
- カルーセルの各画像。type属性が
slides
の場合、:nth-child(n)
を使った番号指定はできない。
ボタンのデザイン
ボタンのデザインは、background-imageプロパティを調整することで変更できます。
CSS
/* ボタン (前へ) */
.amp-carousel-button-prev {
background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>' ) ;
}
/* ボタン (次へ) */
.amp-carousel-button-next {
background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="-18 -18 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" transform="rotate(180)" /></svg>' ) ;
}
指定例
CSS
/* カルーセル全体 */
amp-carousel {
border: 2px solid #000 ;
}
/* 戻るボタン */
.amp-carousel-button-prev {
background-color: blue ;
}
/* 進むボタン */
.amp-carousel-button-next {
background-color: red ;
background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="-18 -18 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" transform="rotate(180)" /></svg>' ) ;
}
/* 各画像 */
.amp-carousel-slide {
border-radius: 10% ;
}
on属性による操作
on属性を付けた外部の要素からカルーセルを操作できます。これでオリジナルのUIを作れます。
id属性
まずは操作したいカルーセルにid属性を付けて下さい。
HTML
<amp-carousel id="syncer-carousel" controls width="300" height="225">
<amp-img src="/image/photo/1.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/2.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/3.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/4.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/5.jpg" width="300" height="225"></amp-img>
</amp-carousel>
on属性
外部のa要素やbutton要素に、on属性でタップのイベントを設定します。イベントは、対象のカルーセル(syncer-carousel
)にgoToSlide(index=n)
というメソッドを命令を実行する、という内容です。index=n
の部分には、0から数えた画像の番号を指定します。例えば、4枚目なら3
となります。
HTML
<p>
<button on="tap:syncer-carousel.goToSlide(index=1)">2枚目に移動</button>
</p>
<p>
<button on="tap:syncer-carousel.goToSlide(index=2)">3枚目に移動</button>
</p>
<p>
<button on="tap:syncer-carousel.goToSlide(index=3)">4枚目に移動</button>
</p>
サンプルコード
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>【デモ】<amp-carousel> - カルーセルを設置する</title>
<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-carousel/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
padding: 12px ;
background-color: #fff ;
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "記事のタイトル",
"image": [
"eyecatch.jpg"
],
"datePublished": "2017-08-23T00:00:00+0900"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<amp-carousel controls width="300" height="225">
<amp-img src="/image/photo/1.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/2.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/3.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/4.jpg" width="300" height="225"></amp-img>
<amp-img src="/image/photo/5.jpg" width="300" height="225"></amp-img>
</amp-carousel>
</body>
</html>