全宽滑块具有一些很棒的功能，包括能够添加带有视频背景的滑块。但是，使其更强大的一项功能是能够扩展滑块以全屏模式显示。因此，我们将向您展示如何向滑块添加全屏功能。

全屏功能添加到 Divi 使用几行CSS和JavaScript极其容易实现。在短短5分钟内，您可以将全宽滑块转换为可扩展以填充整个屏幕的全屏滑块，就像全屏标题一样。

在Divi上实现全屏滑块功能

如果您还没有阅读我们的 Divi界面演示教程，我邀请您这样做。

步骤1：在全宽模式下添加带有幻灯片的滑块

使用“ 迪维生成器 »添加部分« 全宽 »然后点击« 插入模块 “。

添加全宽模块。

添加一个模块滑块迪维＃

在“全屏滑块设置”的“自定义CSS”标签下，添加一个名为“ et_fullscreen_slider “。

在“常规设置”中添加新幻灯片。

在幻灯片设置的“常规设置”下，更新以下项目：

节：[输入您的主题]
按钮的文字：输入您的按钮上的文字]
URL按钮：输入您的网址按钮]
背景图像：[添加的背景图像（我正在使用来自unsplash.com的图像)

对要添加的幻灯片重复此步骤。

完成后，点击“ 保存并退出 “。

如何添加自定义CSS和JavaScript

在WordPress信息中心中，转到“ Divi→主题选项 在“常规设置”下的“自定义CSS”文本框中输入以下CSS：

.et_fullscreen_slider .et_pb_slides，.et_fullscreen_slider .et_pb_slide，.et_fullscreen_slider .et_pb_container {最小高度：100％显著; 高度：100％重要;！ }

单击下一个标签，然后将以下javascript添加到标题为“ 将代码添加到头部您的博客 »：

(function($) {
 
 $(window).on('load resize', function() {
 $('.et_fullscreen_slider').each(function() {
 et_fullscreen_slider($(this));
 });
 });
 
 function et_fullscreen_slider(et_slider) {
 var et_viewport_width = $(window).width(),
 et_viewport_height = $(window).height(),
 et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
 $admin_bar = $('#wpadminbar'),
 $main_header = $('#main-header'),
 $top_header = $('#top-header');
 
 $(et_slider).height('auto');
 
 if ($admin_bar.length) {
 var et_viewport_height = et_viewport_height - $admin_bar.height();
 }
 
 if ($top_header.length) {
 var et_viewport_height = et_viewport_height - $top_header.height();
 }
 
 if (!$('.et_transparent_nav').length) {
 var et_viewport_height = et_viewport_height - $main_header.height();
 }
 
 if (et_viewport_height > et_slider_height) {
 $(et_slider).height(et_viewport_height);
 }
 }
 
})(jQuery);

最后

现在你有一个全屏模式滑块现场网络. 使用它为大多数浏览器创建有效的全角滑块。

如有任何疑问，请随时询问。

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =下载 TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

其他Divi教程

类似商品

13评论

富兰克林库波 6 年 2021 月 9 日上午 34:XNUMX

您好，感谢您提供本教程！我在这里找不到要插入滑块的 js 和 css 代码
回答
塞巴斯蒂安 27 年 2020 月 10 日 43 时 XNUMX 分

您好，很棒的教程。
另一方面，它不会在iphone上全屏显示，例如，通过倾斜iphone，滑块会不时全屏显示，但并非始终显示…。好像它没有响应一样，您是否有解决此小问题的想法？

提前致谢，
真诚的，
回答
- 蒂埃里·贝特朗 27 年 2020 月 19 日 15 时 XNUMX 分
  
  你好，
  
  尝试停用所有其他插件，并检查您的WordPress和Divi版本是否最新。
  回答
初级 11 年 2018 月 16 日 44 时 XNUMX 分

下午好，如何自定义幻灯片的大小以匹配横幅图像的大小，以使我无法裁剪图像？
回答
- 蒂埃里·贝特朗 12 年 2018 月 11 日 53 时 XNUMX 分
  
  你好，
  
  我不明白的问题。
  回答
勒克莱尔 10年2018月14日，19小时XNUMX分

你好，
感谢本文。我已经读到，只要我们对CSS的修改不多，就不一定需要在Divi中安装子主题。
这里还有一些定制...
那么，在应用超级教程之前，您是否推荐一个儿童主题？
预先感谢您提供的所有建议，我经常从中汲取灵感🙂
回答
- 蒂埃里·贝特朗 12年2018月9日，04小时XNUMX分
  
  你好，
  
  不必要。如果您没有太多的技术知识，则可以保留divi。
  回答
埃莉诺 4年2017月18日48小时XNUMX分钟

你好，非常好的文章！
我按照文章中的指示进行操作，但是我的滑块未在DIVI上全屏显示。
你能帮助我吗？我想把它放在我的主页上。

MERCI倒VOTRE助手
回答
- 蒂埃里·贝特朗 5年2017月19日22小时XNUMX分钟
  
  你好，
  
  您是否已联络DIVI小组？
  回答
- 船舶 16年2018月16日，52小时XNUMX分
  
  Aliénor，你好，
  我有同样的问题...找到解决方案了吗？
  商业
  回答
灵光 15 年 2017 月 19 日 41 时 XNUMX 分

你好，
我正在使用构建器来构建主页……预览时，我会看到该页面。
问题是，当我保存页面并再次打开它时，滑块不会出现。
有人可以帮我吗？
回答
- 蒂埃里·贝特朗 16 年 2017 月 7 日 58 时 XNUMX 分
  
  你好，
  
  这可能是由于错误所致，您是否尝试联系Eleganthemes支持？
  回答
Eva 福音系列 17 年 2017 月 0 日 36 时 XNUMX 分

你好，
谢谢你的文章！
你知道我如何改变幻灯片滚动的速度？
回答