使用新的“模态”功能将任何Slider加载到另一个
新的“模态功能”使您可以通过单击按钮按需显示滑块。这可以通过在另一个Slider中设置“操作”,或者通过HTML链接或JavaScript来完成。
内容:
- 模态滑块
- 主滑块
- 网页设置
- 自定义HTML链接(无需主滑块)
- 相关话题
- 图层动作
- 新模块
- 添加到网页
1.模态滑块
模态滑块与其他任何滑块相同,只不过它们仅通过用户交互按需显示。在此示例中,我们将设置“关闭”按钮,并选择模态应如何显示。
准备好滑块后,选择将其作为模态加载到页面中时应如何显示。
使用“位置”选项(1)为内容设置对齐方式,然后选择是否在内容后面放置传统的彩色背景(2/3)。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/as_modal-2.jpg)
接下来,添加一个“ Close Modal”按钮,以允许用户退出已加载的内容。在此示例中,我们将添加一个简单的图标层
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/close-button-2.jpg)
然后在编辑阶段选择“图层”,然后单击“图层动作”图标。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/open-layer-actions-2.jpg)
然后在“动作”面板中,滚动到“幻灯片动作”部分,然后选择“关闭滑块模式”。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/close-modal-action-2.jpg)
然后,您将在列表中看到“操作”。此时,关闭面板,保存Slider,然后继续执行步骤2!
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/close-actions-panel-2.jpg)
2.您的主滑块
默认情况下,我们的主滑块就是我们将在页面上显示的内容。然后,在此Slider内,我们将创建一个特殊按钮以打开Modal Slider。
首先,在编辑阶段添加一个图层。它可以是任何类型的图层,但是在此示例中,我们将使用传统的Button。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/modal-button-2.jpg)
接下来,在编辑阶段选择“按钮”,然后单击“操作”图标以设置模式链接。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/layer-actions-3.jpg)
然后从“幻灯片操作”部分中,选择“打开滑块模式”。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/open-modal-action-2.jpg)
最后,选择要加载到Modal中的Slider的名称,还可以从该Slider中选择要加载的特定Slide。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/modal-action-settings-2.jpg)
3.网页设置
只将主滑块添加到您的网页!
如果您已按照上面的步骤#1和#2进行操作,则只需将Main Slider添加到页面中,因为Modal Slider将通过Ajax按需加载。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/main-slider-2.jpg)
4. HTML链接或JavaScript
要从简单的HTML链接加载Slider,首先我们需要在页面上嵌入“ Modal Slider”。默认情况下,它将被隐藏,然后在单击自定义链接时显示。
一个简单的简码公式就是在滑块的简码中包含用法=“ modal”。但是,使用简码向导,我们可以自动进行设置。
首先,从页面块中选择“滑块革命”以选择滑块。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/themepunch-block-2.jpg)
然后启用右上角的“将滑块添加为模态”按钮,然后单击“ +”图标以添加滑块。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/add-slider-as-modal-2.jpg)
接下来,编辑以下HTML,将“ slider-alias-here”替换为Slider’s Alias。(在复制/粘贴后重新输入双引号和单引号)。
<a href=”#” onclick=”document.dispatchEvent(newEvent(‘RS_OPENMODAL_slider-alias-here’));返回false”>打开模式滑块!</a>
然后将此链接添加到页面内容中的某处。
#1是自定义HTML块,而#2中的图标表示“模块滑块”块,该块默认情况下将隐藏,并且仅在用户交互时加载。
![[Slider Revolution 6]使用新的将任何Slider加载到另一个 [Slider Revolution 6]使用新的将任何Slider加载到另一个](https://aladd.net//wp-content/uploads/2020/05/link-setup-2.jpg)