如何使用 DIVI 创建一个全宽幻灯片

 

Divi的全宽幻灯片播放器 模块有一些很棒的功能,包括添加视差滑块和视频背景。但是,一个使它更强大的功能是扩展到全屏滑块的能力。Divi的全宽头模块已经有了这个全屏选项,所以我们认为向您展示如何向全宽滑块添加相同的功能是一个好主意。

向Divi的全宽幻灯片播放器模块添加全屏功能非常容易实现,只需几行 CSS 和 Javascript。在短短5分钟内,你就可以将全宽Slider转换为全屏Slider,它可以像那些全屏标题一样在页面加载时展开以填充整个屏幕。

我们开始吧。

用Divi实现全屏滑块功能

步骤1:添加一个带 Slider 的全宽滑块模块

使用Divi Builder,添加一个全宽部分,然后单击“插入模块”。

在“全宽幻灯片播放器”模块设置中的“自定义CSS”下,添加一个名为 et_fullscreen_Slider 的CSS类。


在常规设置下,添加一个新幻灯片。

在幻灯片设置中,在常规设置下更新内容:

重复这个步骤,需要多少张幻灯片就做多少张。

然后保存并退出

添加自定义CSS和Javascript

从WordPress仪表盘,转到 Divi→ 主题选项,在一般设置下,在自定义CSS文本框中输入以下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;
}

接下来单击 积分 选项卡,并将以下javascript添加到文本框标记为“将代码添加到您博客 < head >”:

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

就是这样!

收尾

现在你的网站有一个全屏滑块。使用它为你的头图部分创建漂亮有效的幻灯片,填充任何设备上的任何屏幕。

本文由 106B 作者:空谷 发表,其版权均为 106B 所有,文章内容系作者个人观点,不代表 106B 对观点赞同或支持。如需转载,请注明文章来源。
7
 

发表评论