Creating a full screen slider in Divi

by | Mar 28, 2017 | Divi Tricks | 0 comments

This is done by using the Full width slider module and adding some CSS and javascript code.

  1. Add full width module, then add full width slider module
  2. Give the module a Custom class name of et_fullscreen-slider – this is under the Custom CSS tab, in the CSS Class field
  3. Under Divi > Theme Options add the following Custom CSS code 
    .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;
}
  4. Under Divi > Theme Options > Integrations tab paste the following code into the “Add code to the <head> of your bl 
    <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_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);
</script>
  5. Once the sliders have been created and the page is saved you should have full screen slider!

Source of tip – https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-full-screen-slider-with-div

Divi WordPress Theme