css 使用Divi创建全屏滑块

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 使用Divi创建全屏滑块相关的知识,希望对你有一定的参考价值。

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

以上是关于css 使用Divi创建全屏滑块的主要内容,如果未能解决你的问题,请参考以下文章

全屏内容滑块仅向右滑动

css 将幻灯片文本定位在全宽Divi滑块上

css 在Divi的全屏菜单覆盖上调整关闭按钮“X”

css 在汉堡包菜单上添加“MENU”以获得全屏DIVI

html 分屏滑块

当用户将鼠标悬停在滑块上时,使光标成为手