amp-carousel 구성요소

참고: 이 구성요소는 AMPHTML 광고에서만 사용할 수 있습니다.

amp-carousel 구성요소는 여러 이미지를 표시하기 위한 슬라이드 쇼를 생성합니다. 속성을 수정하여 슬라이드 쇼의 모양과 동작을 맞춤 설정할 수 있습니다.

amp-carousel 구성요소 렌더링 예시

프로젝트에 amp-carousel 구성요소를 사용하는 방법:

  1. 구성요소 패널에 이어 갤러리 폴더를 엽니다.

  2. amp-carousel 구성요소를 스테이지로 드래그합니다.

  3. 속성 패널에서 amp-carousel 속성 섹션을 찾은 다음 이름 입력란에 구성요소 이름을 입력합니다.

  4. 이미지 입력란에서 다음 방법 중 하나를 사용하여 갤러리에 이미지를 추가합니다.

    • 갤러리 이미지 선택 버튼을 클릭합니다. 이미지 선택 버튼을 클릭하여 이미지 파일을 찾거나 파일을 대화상자로 바로 드래그합니다.
    • 쉼표로 구분된 이미지 URL을 입력합니다.
  5. 원하는 경우 구성요소 속성을 조정합니다(아래 설명 참조).

코드 보기

코드 보기에서 amp-carousel 구성요소는 이미지 속성의 모든 이미지를 특수 Google Web Designer 속성인 images에 하위 항목으로 포함하는 대신 나열합니다. 그렇지 않으면 구성요소의 소스 코드가 공식 사양을 따라야 합니다. 게시된 파일은 공식 사양을 완벽히 따릅니다.

슬라이드 쇼에서 이미지를 재정렬하거나 삭제하는 방법:

  1. 속성 패널의 amp-carousel 속성 섹션에서 갤러리 이미지 선택 버튼을 클릭합니다. 슬라이드 쇼의 이미지 목록이 있는 대화상자가 열립니다.
  2. 이미지를 새 위치로 드래그하여 순서를 변경하거나 이미지에 마우스 커서를 올리고 삭제 아이콘 이미지 삭제 를 클릭하여 이미지를 갤러리에서 삭제합니다.
  3. 확인을 클릭합니다.

속성

속성 패널에서 amp-carousel 구성요소의 모양과 동작을 변경하세요.

속성 설명
이름 amp-carousel 이름입니다.
이미지 슬라이드 쇼에 표시할 이미지 URL입니다.
유형 표시 유형:
  • 슬라이드 쇼 - 모든 슬라이드가 연속적으로 표시되며 가로 방향으로 스크롤할 수 있습니다.
  • 슬라이드 - 한 번에 하나의 슬라이드가 표시됩니다.
자동재생
유형이 슬라이드로 설정된 경우에만 적용됩니다.

이 체크박스를 선택하면 사용자의 상호작용 없이 자동으로 슬라이드 쇼의 다음 이미지로 넘어갑니다. 자동재생이 적용하려면 3개 이상의 슬라이드가 있어야 합니다.

지연
유형이 슬라이드로 설정되어 있고 자동재생이 사용 설정된 경우에만 적용됩니다.

다음 슬라이드로 넘어가는 데 필요한 시간(밀리초)입니다. 기본 지연은 5000밀리초(5초)입니다.

컨트롤 표시 이 체크박스를 선택하면 사용자가 휴대기기에서 슬라이드 쇼 항목을 탐색할 수 있도록 왼쪽 및 오른쪽 화살표가 표시됩니다. 데스크톱에서는 여러 항목이 포함된 슬라이드 쇼의 경우 항상 화살표가 표시됩니다.
연속 재생
유형이 슬라이드로 설정된 경우에만 적용됩니다.

이 체크박스를 선택하면 슬라이드 쇼의 첫 번째 슬라이드 또는 마지막 슬라이드에서 반대쪽으로 연속 재생할 수 있습니다. 연속 재생이 적용되려면 3개 이상의 슬라이드가 있어야 합니다.

이벤트 및 작업

amp-carousel 구성요소에서 전송하는 이벤트

다음과 같은 amp-carousel 구성요소 이벤트를 기반으로 다른 작업을 트리거할 수 있습니다.

이벤트 설명
슬라이드 변경 표시된 슬라이드가 변경되면 전송됩니다.

이벤트 대화상자에서 이러한 이벤트 중 하나를 선택하려면 amp-carousel 구성요소를 타겟으로 설정하세요.

amp-carousel 구성요소에서 수행하는 작업

다른 이벤트에 대한 반응으로 다음과 같은 amp-carousel 구성요소 작업이 트리거될 수 있습니다.

작업 구성 옵션
슬라이드로 이동
  • 색인 - 이동할 슬라이드(0은 첫 번째 슬라이드)를 나타냅니다.

이벤트 대화상자에서 이러한 작업 중 하나를 선택하는 경우 amp-carousel 구성요소를 수신자로 설정하세요.

이벤트 구성 방법 알아보기

미리보기

Google Web Designer 인터페이스 내에서는 이 구성요소를 미리 볼 수 없습니다. 작동 중인 구성요소를 보려면 오른쪽 상단에 있는 미리보기 버튼을 클릭하여 원하는 브라우저에서 문서를 미리 보세요.

도움이 되었나요?

어떻게 하면 개선할 수 있을까요?

도움이 더 필요하신가요?

다음 단계를 시도해 보세요.

검색
검색어 지우기
검색 닫기
Google 앱
기본 메뉴
3211798694057750588
true
도움말 센터 검색
true
true
true
true
true
5050422
false
false