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

amp-image-slider

實驗性

Bento

說明

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

必要指令碼

AMP Bento (獨立)

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

<script async custom-element="amp-image-slider" src="https://cdn.ampproject.org/v0/amp-image-slider-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-image-slider-1.0.css">

支援的版面配置

fixed intrinsic nodisplay responsive

用法

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]) 將對應滑桿的分隔線移動到從左側算起的指定百分比位置。

版本注意事項

1.0 版本中完成了一些更新和變更，這些更新和變更與 0.1 版本略有不同。本節說明這些更新和差異。

屬性更新

`0.1` 參數	更新類型	`1.0` 參數	注意
`disable-hint-reappear`	已重新命名	`display-hint-once`	目的是不要使用帶有負面名稱的屬性。

驗證

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

需要更多協助嗎？

您已閱讀本文件十幾次，但它仍然沒有真正涵蓋您所有的問題？也許其他人也有相同的感受：在 Stack Overflow 上與他們交流。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性的貢獻。

前往 GitHub

amp-image-slider 1.0 0.1

說明