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

2019-04-13AMPAMPコンポーネント

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版カルーセルスライダーのサンプルコード②

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

基本的には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>

2019-04-13AMPAMPコンポーネント

Posted by Yousuke.U