AMP에는 유용한 구성 요소인 amp-carousel이 있습니다. 주로 이미지 및 갤러리와 함께 사용되지만 스크롤 가능한 내비게이션 메뉴를 만드는 데도 사용할 수 있습니다.
먼저 스크립트를 가져와야 합니다. 문서 헤드에 다음을 추가합니다.
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
기본적인 amp-carousel 사용법은 다음과 같습니다.
<amp-carousel height="1.8rem"
layout="fixed-height"
type="carousel">
...
</amp-carousel>
여기서 주목해야 할 주요 사항은 type 속성입니다. 다음 값 중 하나를 취할 수 있습니다.
- type = "carousel": 기본값이며 가로로 스크롤 할 수 있는 목록으로 표시됩니다.
- type = "slides": 한 번에 하나의 항목 (슬라이드)만 표시됩니다.
이제 캐러셀에 내비게이션 메뉴를 추가해 보겠습니다.
<amp-carousel height="1.8rem"
layout="fixed-height"
type="carousel"
controls
class="primary-nav">
<span><a href="#">news</a></span>
<span><a href="#">sports</a></span>
<span><a href="#">arts</a></span>
...
</amp-carousel>
캐러셀에 추가될 항목에 스타일을 지정합니다.
.primary-nav a {
font-family: 'PT Sans', sans-serif;
color: #fff;
font-size: 1.5rem;
text-decoration: none;
padding-right: 0.5rem;
}
내비게이션 바는 터치스크린에서 스크롤하여 항목을 볼 수 있지만, 캐러셀을 추가하면 이전 및 다음 버튼이 자동으로 생겨 항목을 넘겨 볼 수 있습니다. (다음 그림 참조).
이제 버튼의 스타일만 지정하면 됩니다. CSS로 기본 버튼의 스타일을 제거할 수 있습니다.
.amp-carousel-button {
background:0;
}
.amp-carousel-button-next {
right:0;
}
그다음으로 :after 가상 요소를 사용하여 내비게이션 메뉴에 화살표 아이콘 및 스타일을 추가할 수 있습니다.
.amp-carousel-button-next::after {
content: '⟩';
right: 0;
text-align: right;
background: linear-gradient (to right, rgba(0,86,137,0) 0%, rgba (0,86, 137, 1) 50%);
color: #fff;
position: absolute;
bottom:0;
font-size: 2rem;
line-height: 2rem;
font-weight: bold;
width: 20px;
}
이제 끝났습니다!
Tip: amp-carousel에 controls 속성을 추가하면 이전 및 다음 버튼이 비활성화되었을 때 사라지는 것을 방지하고 항상 표시됩니다.