我添加了一些脚本和CSS, 以使Divi中的滑块扩展为填充整个屏幕。这通常可以正常工作, 但我也用divi的全宽菜单模块替换了普通的导航菜单。一旦执行此操作并启动页面, 它就会不断从滚动切换到无滚动条。就像它不断调整图像比例一样, 它有时会停止, 但通常都不会停止。
【Divi全屏滑块错误】我尝试过使滚动条始终处于”
打开”
状态, 但是这使得脚本根本没有打开。使其无用。
这是CSS <
<
<
<
<
<
<
<
<
<
<
<
.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {
min-height: 100% !important;
height: 100% !important;
}
这是使用的脚本< < < < < < < < < < < <
<
script>
(function($) {
$(window).on('load resize', function() {
$('.et_fullscreen_slider').each(function() {
et_fullscreen_slider($(this));
});
});
function et_fullscreen_slider(et_slider) {
var 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 &
&
!$('.et_vertical_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);
<
/script>
希望有人能帮助我修复屏幕不断翻转时不断调整的错误。
#1你需要将CSS高度调整为vh单位, 并在容器中添加一些填充
.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide {
min-height: 90vh;
!important;
}
.et_fullscreen_slider .et_pb_container{
padding-top: 16vw;
padding-bottom: 16vw;
}
推荐阅读
- 显示CPT每个分类的最新帖子
- 自定义WordPress样式表未加载
- CSS视口单位显示问题
- div被选中,并且单击它时会出现边框
- 显示WordPress博客文章类别
- CSS不会在WordPress中链接到我的page.php模板,其他一切都正常
- CSS摆脱WordPress Twenty Nineteen主题中的空白()
- 用WP短代码显示来自mySQL的数据字段
- 在每个WordPress页面中显示不同的标题文本