圖像比較是一個簡單的插件，可讓您通過比較圖像前后的對比來展示產品和服務的功能。您可以通過簡碼或VC元素使用這款wordpress插件。

• 插件介紹：詳情
• 插件文檔：詳情

插件功能

• 從左到右或從上到下比較圖像
• 在所需位置設置起點比較點
• 在圖像的前后添加標簽
• 使用您自己的CSS進一步自定義

插件功能

您可以從左到右或從上到下比較圖像。為圖像添加標簽，以便客戶了解您的服務效率。更改比較點以獲得最大效果。使用您自己的CSS類進一步自定義它。

如何使用？

如果您需要一個簡單的圖像比較顯示，只有兩張照片并排顯示，那么這個簡單的短代碼就可以解決問題：

[images-comparison image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]

如果希望選擇水平或垂直比較圖像的方式，則需要使用direction參數。水平表示您的比較點將在圖像之間左右移動。垂直意味著您的比較點將在圖像之間上下移動。默認為水平。

[images-comparison orientation="vertical" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]

如果要更改兩個圖像之間的比較點的位置，可以使用??default_offset_pct參數。它的值可以在0到1之間。它定義了該點距左邊距（水平方向）或頂部距邊緣（垂直方向）的距離（以百分比為單位）。例如：0.5表示距邊距的50％，0.3表示距邊距的30％，0.8表示距邊距的80％。默認值為0.5。

[images-comparison orientation="vertical" default_offset_pct="0.4" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]

如果希望為照片添加標簽，則可以使用before_label和after_label參數。前標簽用于圖像1，后標簽用于圖像2。

[images-comparison before_label="Before" after_label="After" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]

如果希望為元素添加CSS類，則可以使用el_css參數。您可以添加用逗號分隔的類。

[images-comparison el_css="class_css" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]

我可以添加自己的CSS嗎？

是的，您在VC元素中有一個專用字段，并且有一個用于簡碼的參數：

[images-comparison el_css="class_css" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]