＜amp-carousel＞ - カルーセルを設置する

1件

公開日: 2017/02/03

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>

デモを開く

</head><body>までを含めて下さい。

<!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"> <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> <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>

body { padding: 12px ; background-color: #fff ; }

</style>