Make the revolution slider full screen
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Make Revolution slider fill the screen using jquery/javascript or CSS.

I want it to fill the ramaining screen area.

Hello, I am interested on your bounty and took a look on your site. I guess you want the menu, header tag, out of the way when the page is loaded. If this is the case, do you need to hide it and show it when a certain event occurs? Or, do you want it to respond to other event?
l88p over 1 year ago
Hi there, The menu can stay as it is. No need to hide it. I want the slider to adapt to the rest of the screen. thanks - Dave
WhiteHat over 1 year ago
you want the slideshow to be bigger or smaller depending on the screen? like this one here:
gabrielsimoes over 1 year ago
awarded to LDubya

Crowdsource coding tasks.

1 Solution

Winning solution

There are 2 options

Option 1. do it inside of WordPress

You're using Wordpress, so if you want an "official" solution, just use the settings.
set the slider

Option 2. do it with Javascript

Otherwise you need to create a .fullscreen class and attach it to the slider. To do so, run this script to add the .fullscreen class to the head:

var css = '.fullscreen{ z-index: 9999 !important; width: 100% !important; height: 100% !important; position: fixed !important; top: 0 !important; left: 0 !important; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {

now, when you want the slider to be fullscreen, run this function:
jQuery('#rev_slider_4_1_wrapper, #rev_slider_4_1').addClass('fullscreen')

And when you want to exit out of fullscreen, run this:
jQuery('#rev_slider_4_1_wrapper, #rev_slider_4_1').removeClass('fullscreen')

Happy New Years! Don't forget to review