amp-image-slider

簡介

amp-image-slider 元件可讓使用者透過移動垂直滑桿來比較 2 張圖片。使用者可以點擊/觸控並拖曳以移動滑桿來比較圖片。

設定

在標頭中匯入 amp-image-slider 元件。

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

在此範例中，我們將建立一些類別來定位標籤。（我們將在下一節中重新探討）

<style amp-custom>
  .label {
    color: white;
    background-color: rgba(0, 0, 0, 0.4);
    width: 5rem;
    padding: 1rem 0;
    text-align: center;
    font-weight: bold;
  }
  .label-left-center {
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
  }
  .label-right-center {
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
  }
  .triangle-hint .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' /%3e%3c/svg%3e");
  }
  .triangle-hint .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' /%3e%3c/svg%3e");
  }
  .slider-no-display .amp-image-slider-hint-left, .slider-no-display .amp-image-slider-hint-right {
    display: none;
  }
  .seek-button-container {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
  }
</style>

基本用法

透過在其中放置 2 個 amp-img 來建構基本圖片滑桿。第一個 amp-img 將會是左側圖片，而第二個將會是右側圖片。

<amp-image-slider width="300" height="200" layout="responsive">
  <amp-img src="/static/samples/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill"></amp-img>
</amp-image-slider>

自訂文字標籤

您可以為圖片新增可自訂的文字標籤，方法是提供額外的 div，並分別使用 first 和 second 屬性標記左側和右側圖片。您可以使用類別自訂標籤的樣式和定位。例如，若要將標籤垂直置中於圖片上，您可以使用 top/bottom 和 transform 規則。請查看「設定」章節以取得詳細資訊。

紅色

綠色

<amp-image-slider width="300" height="200" layout="responsive">
  <amp-img src="/static/samples/img/red_apple_1_1024x682.jpg" alt="A red apple" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/green_apple_1_1024x682.jpg" alt="A green apple" layout="fill"></amp-img>
  <div first class="label label-left-center">Red</div>
  <div second class="label label-right-center">Green</div>
</amp-image-slider>

箭頭提示

預設情況下，會一直顯示關於移動圖片滑桿的箭頭提示。一旦使用者與滑桿互動（例如點擊和觸控），提示就會淡出。如果滑桿離開視窗範圍然後又再次回到視窗範圍，提示就會重新出現。若要停用此預設行為，請將 disable-hint-reappear 屬性新增至滑桿。

<amp-image-slider width="300" height="200" layout="responsive" disable-hint-reappear>
  <amp-img src="/static/samples/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill"></amp-img>
</amp-image-slider>

自訂提示

透過覆寫 .amp-image-slider-hint-left 和 .amp-image-slider-hint-right 類別，您可以變更左右提示圖示的樣式。特別是，您可以覆寫 background-image 以提供您自己的圖示。

<amp-image-slider class="triangle-hint" width="300" height="200" layout="responsive">
  <amp-img src="/static/samples/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill"></amp-img>
</amp-image-slider>

隱藏提示

若要隱藏提示，您可以簡單地為這些類別設定 display: none;。

<amp-image-slider class="slider-no-display" width="300" height="200" layout="responsive">
  <amp-img src="/static/samples/img/red_apple_1_1024x682.jpg" alt="A red apple" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/green_apple_1_1024x682.jpg" alt="A green apple" layout="fill"></amp-img>
</amp-image-slider>

動作

amp-image-slider 提供一個動作 .seekTo(percent=[0-1])，可將滑桿移動到從左側算起的對應百分比位置。例如，您可以使用 slider-id.seekTo(percent=0) 和 slider-id.seekTo(percent=1) 將滑桿移動到左右邊界。

<amp-image-slider id="seekable" width="300" height="200" layout="responsive">
  <amp-img src="/static/samples/img/canoe_900x600_blur.jpg" alt="A blurry image about canoeing" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/canoe_900x600.jpg" alt="An image about canoeing" layout="fill"></amp-img>
</amp-image-slider>
<div class="seek-button-container">
  <button on="tap:seekable.seekTo(percent=1)">SHOW LEFT</button>
  <button on="tap:seekable.seekTo(percent=0)">SHOW RIGHT</button>
</div>

不同的初始位置

預設情況下，滑桿預設會放置在滑桿的中心。您可以使用 initial-slider-position 屬性變更其初始位置。

<amp-image-slider width="300" height="200" layout="responsive" initial-slider-position="0.3">
  <amp-img src="/static/samples/img/red_apple_1_1024x682.jpg" alt="A red apple" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/green_apple_1_1024x682.jpg" alt="A green apple" layout="fill"></amp-img>
</amp-image-slider>

不同的步階大小

透過將 step-size 設定為介於 0 和 1 之間的值，當滑桿處於焦點時，您每次按下向左和向右箭頭鍵時，都可以自訂百分比來移動滑桿。

<amp-image-slider tabindex="0" width="300" height="200" layout="responsive" step-size="0.2">
  <amp-img src="/static/samples/img/red_apple_1_1024x682.jpg" alt="A red apple" layout="fill"></amp-img>
  <amp-img src="/static/samples/img/green_apple_1_1024x682.jpg" alt="A green apple" layout="fill"></amp-img>
</amp-image-slider>

需要進一步說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，以討論您的確切使用案例。

前往 Stack Overflow

有未說明的特色功能嗎？

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

在 GitHub 上編輯範例

由 @kevinkassimo 撰寫