![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/before-after-addon-6.jpg)
插件要求
之前/之后是需要购买代码注册和激活的高级插件。
内容
- 视图切换器
- 模块设置
- 幻灯片背景
- 幻灯片设置
- 图层设定
- 相关话题
- 安装附加组件
- 启用插件
- 导入模板
1.视图切换器
设置前后视图时在模式之间切换
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/before-after-views-6.jpg)
2.模块设置
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-module-settings-6.jpg)
箭头图标可用于水平和垂直拖动栏。单击其中一个图标将其更改为另一个。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-arrow-icons-6.jpg)
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-select-icon-6.jpg)
1.图标大小
拖动箭头图标的字体大小。
2.图标间距
拖动箭头图标之间的间距,以像素为单位。
3.图标颜色
拖动箭头图标颜色。
4.图标阴影
选择将CSS文本阴影添加到拖动箭头图标。
5.阴影模糊
图标阴影的模糊值。
6.阴影颜色
图标阴影的颜色。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/before-after-slide-settings-6.jpg)
1.
线宽分隔线的宽度(以像素为单位)。
2.线条颜色
分隔线的颜色。
3.线阴影
将CSS框阴影添加到分隔线。
4.阴影模糊
分隔线阴影的模糊值。
5.阴影颜色
分隔线阴影的颜色。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/before-after-divider-line-6.jpg)
1.在舞台上单击动画,
将分隔线视图自动移动到单击模块的位置。
2.持续
时间单击动画发生的总时间(以毫秒为单位)。
3.缓和单击动画
的缓和方程。
4.鼠标光标
将鼠标悬停在模块上时要使用的CSS光标。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/before-after-animate-onclick-6.jpg)
1.
拖动箭头容器的填充空间。
2.边境半径
一个CSS边界半径为拖动箭头容器。
3. BG颜色
拖动箭头容器的背景颜色。
4.边框
为拖动箭头容器添加可选边框。
5.边框宽度
拖动箭头容器的边框大小。
6.边框颜色
拖动箭头容器边框的颜色。
7. Box Shadow
将可选的CSS box-shadow添加到拖动箭头容器。
8. Shadow Blur
拖动箭头容器框阴影的模糊值。
9.暗影力量
阴影强度为拖动箭头容器框的阴影。
10.阴影颜色
拖动箭头容器框阴影的颜色。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-drag-container-1-6.jpg)
3.幻灯片背景
设置之前和之后视图的主要背景
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/before-after-background-1-4.jpg)
4.幻灯片设置
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-slide-setting-3.jpg)
1.激活
为当前幻灯片启用添加之前/之后。
2.方向
选择是将视图并排还是彼此分开。
3.初始分割
每当显示幻灯片时,Before / After视图的起点。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-slide-settings-1-3.jpg)
1.延迟
之前/之后视图开始其初始位置之前的延迟(以毫秒为单位)。
2.持续
时间初始动画发生的总时间。
3.缓 动初始动画
的 缓动方程式。
4.动画输出
选择当当前幻灯片更改为下一个时,“前/后”视图是否应淡出或“折叠”(反转开始动画)。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-init-animation-1-3.jpg)
对箭头进行动画处理,以向用户提示可以拖动它们。
1.预告片动画
- 无限循环
对箭头进行连续动画处理。 - 首次显示
幻灯片时,在初始显示时对箭头进行动画处理。 - 直到首次抓取
动画箭头,直到用户首先与“之前/之后”视图进行交互。
2.动画类型
选择“排斥”或“吸引”来确定动画的反弹方向。
3.距离
使箭头动画的像素数量。
4.速度
动画发生的总时间(以毫秒为单位)。
5.缓 动动画
的 缓动方程式。
6.延迟
动画开始前的延迟(以毫秒为单位)。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-teaser-settings-2.jpg)
1.箭头过渡
在鼠标悬停时为拖动箭头启用悬停过渡。
2. Shift Offset偏移
箭头的像素数量。
3.速度
动画发生的总时间(以毫秒为单位)。
4.缓 动动画
的 缓动方程式。
5.延迟
动画开始之前的延迟(以毫秒为单位)。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-arrow-settings-2.jpg)
5.图层设置
在编辑舞台上选择一个图层,然后选择将其放置在“之前”或“之后”视图中。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-layer-settings-2.jpg)
然后,在时间轴编辑器中,图层的名称将为“ B”(之前)或“ A”(之后) ,并且划线的眼睛图标将指示图层是否在编辑阶段可见,这取决于 编辑视图。
![[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality [Slider Revolution 6] Compare two slides before and after with drag/reveal functionality](https://aladd.net//wp-content/uploads/2020/05/beforeafter-timeline-2.jpg)