The full width slider comes with some awesome features including the ability to add sliders with video backgrounds. But, one feature that makes it even more powerful is the ability to expand the slider to display in full screen mode. So we'll show you how to add full screen functionality to a slider.

The addition of a full screen feature to the slider module of Divi is extremely easy to implement with a few lines of CSS and JavaScript. In just 5 minutes, you can convert your full width slider to a full screen slider that expands to fill the entire screen, much like full screen headers.

The implementation of the full-screen slider functionality on Divi

If you haven't read our tutorial on the presentation of the Divi interface, I invite you to do it.

Step 1: Add a slider with slides in full width mode

Use the " Divi Builder »Add a section« full width »And click on«  Insert a module ».

How to add a module on divi builder

Add a full-width module.

add a module slider Divi #

In the Fullscreen Slider Settings, under the "Custom CSS" tab, add a CSS class called " et_fullscreen_slider ».

Advanced css modification of divi slider

In "General settings" add a new slide.

Add a diaspositive on divi

In the slide settings, under General Settings update the following items:

  • Category: [enter your heading]
  • Text Button: [enter your text button]
  • URL Button: [enter your URL button]
  • Background image: [add your background image] (I am using an image from unsplash.com)

Divi slide settings

Repeat this step for as many slides as you want to add.

Once done, click on " Save & Exit ».

How to add custom CSS & JavaScript

From the WordPress dashboard, go to " Divi → Theme Options And under "General Settings", enter the following CSS in the Custom CSS text box:

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

click on the next tab and add the following javascript to the text box titled " Add the code to the head of your blog ":

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

Finally

Now you have a full screen mode slider for your website. Use it to create effective full-width sliders for most browsers.

If you have any questions, do not hesitate to ask them.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=” 1/2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Other Divi tutorials