AMP
EN
德語 法語 阿拉伯語 西班牙語 義大利語 印尼語 日語 韓語 葡萄牙語 俄語 土耳其語 簡體中文 波蘭語 越南語

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