Question

我添加了一些脚本和CSS，以使Divi中的滑块扩展为填充整个屏幕。这通常可以正常工作，但我也用divi的全宽菜单模块替换了常规导航菜单。一旦执行此操作并启动页面，它就会不断从滚动切换到无滚动条。就像它不断调整图像比例一样，它有时会停止，但通常也不会停止。

https://zaveclothing.com/

我尝试使滚动条始终处于“打开”状态，但这使脚本根本没有打开。使其变得无用。

这是CSS <<<<<<<<<<<< / p>

.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;
}

这是使用的脚本<<<<<<<<<<<< / p>

<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>

希望有人可以帮助我修复屏幕不断翻转时不断调整的错误。

Answer 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;
}

Divi全屏滑块错误

1 个答案: