圖像比較是一個(gè)簡(jiǎn)單的插件，可讓您通過(guò)比較圖像前后的對(duì)比來(lái)展示產(chǎn)品和服務(wù)的功能。您可以通過(guò)簡(jiǎn)碼或VC元素使用這款wordpress插件。
插件功能
- 從左到右或從上到下比較圖像
- 在所需位置設(shè)置起點(diǎn)比較點(diǎn)
- 在圖像的前后添加標(biāo)簽
- 使用您自己的CSS進(jìn)一步自定義
插件功能
您可以從左到右或從上到下比較圖像。為圖像添加標(biāo)簽，以便客戶了解您的服務(wù)效率。更改比較點(diǎn)以獲得最大效果。使用您自己的CSS類進(jìn)一步自定義它。
如何使用？
如果您需要一個(gè)簡(jiǎn)單的圖像比較顯示，只有兩張照片并排顯示，那么這個(gè)簡(jiǎn)單的短代碼就可以解決問(wèn)題：
[images-comparison image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]如果希望選擇水平或垂直比較圖像的方式，則需要使用direction參數(shù)。水平表示您的比較點(diǎn)將在圖像之間左右移動(dòng)。垂直意味著您的比較點(diǎn)將在圖像之間上下移動(dòng)。默認(rèn)為水平。
[images-comparison orientation="vertical" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]如果要更改兩個(gè)圖像之間的比較點(diǎn)的位置，可以使用??default_offset_pct參數(shù)。它的值可以在0到1之間。它定義了該點(diǎn)距左邊距（水平方向）或頂部距邊緣（垂直方向）的距離（以百分比為單位）。例如：0.5表示距邊距的50％，0.3表示距邊距的30％，0.8表示距邊距的80％。默認(rèn)值為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"]如果希望為照片添加標(biāo)簽，則可以使用before_label和after_label參數(shù)。前標(biāo)簽用于圖像1，后標(biāo)簽用于圖像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參數(shù)。您可以添加用逗號(hào)分隔的類。
[images-comparison el_css="class_css" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]我可以添加自己的CSS嗎？
是的，您在VC元素中有一個(gè)專用字段，并且有一個(gè)用于簡(jiǎn)碼的參數(shù)：
[images-comparison el_css="class_css" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]