AMP-Carouselを使ったカルーセルスライダーを実装する方法

2020-01-04AMP

AMP-Carouselを使ったカルーセルスライダーを実装する方法

AMPコンポーネントのamp-carouselを利用してカルーセルスライダーを実装するサンプルコードです

See the Pen AMP-Carousel by yochans (@yochans) on CodePen.

amp-carouselを読み込む

amp-carouselを利用するには、AMPコンポーネントのamp-carousel-0.1.jsを読み込む必要があります

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

AMP版カルーセルスライダーのサンプルコード①

画像ではなくdivボックスをカルーセル表示するパターン

HTML

<amp-carousel height="300" layout="fixed-height" type="slides">
		<div><div class="box boxA">A</div></div>
		<div><div class="box boxB">B</div>S</div>
		<div><div class="box boxC">C</div></div>
</amp-carousel>

CSS

/*box*/
.box{
	display:flex;
	width: 100%;
	height:300px;
		align-items: center;
		justify-content: center;
	font-size:10rem;
	color:#FFF;
}
.boxA{
	background: blue;
}
.boxB{
	background: green;
	}
.boxC{
	background: green;
}

AMP版カルーセルスライダーのサンプルコード②

３つの画像をカルーセルボタンで切り替えいます

基本的にはCSSは必要ありません

レスポンシブを指定してのwidthとheightは画像の縦横比に合わせて設定しておけば無難かと思います

HTML

<amp-carousel width="400" height="200" layout="responsive" type="slides">
		<amp-img src="画像URL" width="400" height="200" layout="responsive" alt="a sample image"></amp-img>
		<amp-img src="画像URL" width="400" height="200" layout="responsive" alt="another sample image"></amp-img>
		<amp-img src="画像URL" width="400" height="200" layout="responsive" alt="and another sample image"></amp-img>
  </amp-carousel>

AMP版カルーセルスライダーのサンプルコード③

autoplayを設定して自動で切り替わるパターンです

画像に対してリンクも付けてみました、ソースコードもサンプルそのままにしてあります

基本的にはCSSは必要ありません

delayで設定できるのは3つ目が終わったあとの再始動までの時間です（ミリ秒）

HTML

<amp-carousel width="400" height="200" layout="responsive" type="slides" autoplay delay="2000">
		<a href="https://1-notes.com/amp/component-selector-tab-menu/"><amp-img src="https://1-notes.com/wp-content/uploads/2019/02/component-selector-tab-menu.jpg" width="400" height="200" layout="responsive" alt=""></amp-img></a>
		<a href="https://1-notes.com/amp/form-post-change-page/"><amp-img src="https://1-notes.com/wp-content/uploads/2019/02/form-post-change-page.jpg" width="400" height="200" layout="responsive" alt=""></amp-img></a>
		<a href="https://1-notes.com/amp/ad-adsense-code/"><amp-img src="https://1-notes.com/wp-content/uploads/2019/02/ad-adsense-code.jpg" width="400" height="200" layout="responsive" alt=""></amp-img></a>
</amp-carousel>

AMP

Posted by Yousuke.U