Create your Full Screen Slider with Divi

by Feb 3, 2020Projects, Tutorials0 comments

Hi my dear Divi Maniac,
As you know the full screen slider module is cool, but if you need the full screen effects (100% horizontal and 100% vertical) you have some problems. What can you do to solve the situation?
I found 2 solutions.

First Solution

  • Add the full width section
  • Add the full width slider Module with slides
  • Add a new slide
  • In the Fullwidth Slider Module go to “Slide setting” > “Advanced” > “Custom CSS”
  • Add “height: 100vh;” to Main Element.

Done!

But there is a solution that is better… and here it is!

Best Solution

If you need something better please use this second solution.

  • Add the full width section
  • Add the fullwidth slider Module with slides
  • In the Fullwidth Slider Module go to “Slide setting” > “Advanced” > “Custom CSS” and add a CSS Class called “et_fullscreen_slider”.
  • Add your slide (please put an image as background to see the effect)
  • Save and exit

Now, you have to insert a bit of CSS and a bit of Javascript to run the full screen slider well.

Copy this 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;}

and paste it into the CSS text box you find in
Dashboard > Divi > Theme Options > General Settings .
Then copy this script:

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

Into
Dashboard > Divi > Theme Options > Integration
In the box “Add code to the < head > of your blog”.
That’s all.

Pay attention, if you use the code with a theme built with the Divi Theme builder may be it doesn’t run.