AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

重要事項：此文件不適用於您目前選取的格式 stories！

amp-image-slider

 
您現在可以在有效的 AMP 文件之外使用此元件，方法是使用此元件的 Bento 版本。請參閱 Bento 指南，以瞭解詳情。

說明

用於比較兩張圖片的滑桿。

 

必要指令碼

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

支援的版面配置

用法

amp-image-slider 元件正好需要兩個 amp-img 元素作為其子元素。第一個子圖片顯示在左側，第二個子圖片顯示在右側。

amp-image-slider 元件也可以包含兩個 <div> 元素，用作圖片的標籤。標籤會覆疊在圖片上方。左側圖片的標籤需要 first 屬性，而右側標籤則需要 second 屬性。依預設，標籤會顯示在圖片的左上角。

<amp-image-slider layout="responsive" width="100" height="200">
  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
  <div first>This apple is green</div>
  <div second>This apple is red</div>
</amp-image-slider>

載入滑桿後，比較的圖片會由垂直長條分隔，滑桿中心會顯示實用的箭頭提示。

使用者可以按下滑鼠或觸控來將滑桿移至指標的位置，然後移動指標來向左或向右拖曳滑桿。對於左側圖片，只會顯示長條左側的部分；同樣地，對於右側圖片，則只會顯示右側的部分。

如果您在 amp-image-slider 元素上指定 tabindex，使用者可以使用鍵盤瀏覽滑桿。按下向下、向左或向右箭頭鍵，滑桿會朝對應方向移動一步。按下 Home 鍵會將滑桿移至中心。按下 PageUp 或 PageDown 鍵會移至滑桿主體的左端或右端。

自訂標籤

您可以透過提供自訂 CSS 類別來自訂標籤。您可以使用 top、right、bottom、left 和 transform: translate(...) 規則來控制其位置。其他規則 (例如 border、background-color 等) 可以用於自訂標籤的樣式。

以下範例顯示具有左上角左側標籤和右上角右側標籤的圖片滑桿

<!-- head -->
<style amp-custom>
  .top-right {
    top: 0;
    right: 0;
  }
</style>

<!-- body -->
<amp-image-slider layout="responsive" width="100" height="200">
  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
  <div first>This apple is green</div>
  <div second class="top-right">This apple is red</div>
</amp-image-slider>

自訂提示

依預設，提示是一對帶有陰影的白色箭頭。若要自訂左側和右側提示，您可以覆寫 .amp-image-slider-hint-left 和 .amp-image-slider-hint-right 類別。若要將箭頭替換為自訂圖片，請覆寫 background-image。若要移除陰影，請設定 filter: none;。

以下範例將箭頭替換為三角形

.amp-image-slider-hint-left {
  width: 10px;
  height: 20px;
  background-size: 10px 20px;
  margin-right: 10px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='10,0 0,10 10,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
}

.amp-image-slider-hint-right {
  width: 10px;
  height: 20px;
  background-size: 10px 20px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' viewBox='0 0 10 20'%3e%3cpolygon points='0,0 10,10 0,20' style='fill:white;stroke:black;stroke-width:1' /%3e%3c/svg%3e");
}

屬性

disable-hint-reappear

一旦使用者開始與滑桿互動 (例如按一下滑鼠按鈕、觸控滑桿以及按下按鍵來移動滑桿)，垂直長條中心顯示的提示就會消失。如果提示接著離開視窗並再次返回，則會重新出現。若要停止此重新出現的行為，請將 disable-hint-reappear 屬性新增至圖片滑桿。

以下範例顯示不重新出現提示的圖片滑桿

<amp-image-slider
  layout="responsive"
  width="100"
  height="200"
  disable-hint-reappear
>
  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
  <div first>This apple is green</div>
  <div second>This apple is red</div>
</amp-image-slider>

initial-slider-position

依預設，垂直滑桿長條位於滑桿主體的中心。若要將初始滑桿位置移至不同的位置，請將 initial-slider-position 設定為介於 0 和 1 之間的值，對應於從滑桿左邊緣算起的 0% 到 100%。

以下範例顯示初始滑桿位置位於左側的圖片滑桿

<amp-image-slider
  layout="responsive"
  width="100"
  height="200"
  initial-slider-position="0"
>
  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
  <div first>This apple is green</div>
  <div second>This apple is red</div>
</amp-image-slider>

step-size

當焦點在滑桿上時，向左和向右鍵盤按鈕每次按下都會將滑桿長條移動 10%。若要使用不同的步距，請將 step-size 設定為介於 0 和 1 之間的值，對應於每次按鍵移動 0% 到移動 100%。

以下範例顯示步距為 25% 的圖片滑桿

<amp-image-slider layout="responsive" width="100" height="200" step-size="0.25">
  <amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
  <amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
  <div first>This apple is green</div>
  <div second>This apple is red</div>
</amp-image-slider>

動作

seekTo

slider-id.seekTo(percent=[0,1]) 將對應滑桿的長條移動到從左側起算的指定百分比。

驗證

請參閱 AMP 驗證器規格中的 amp-image-slider 規則。

需要更多協助嗎？

您已經閱讀這份文件很多次，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有同樣的感覺：在 Stack Overflow 上與他們交流。

前往 Stack Overflow
發現錯誤或缺少功能嗎？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別熱衷的問題提供一次性的貢獻。

前往 GitHub