本页目录
图像比较是一个简单的插件，可让您通过比较图像前后的对比来展示产品和服务的功能。您可以通过简码或 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"]