Skip to main content

How stretch slider to full browser width and height?

Slider behaves and can be resized like any other <div> block element with unknown HTML inside. \

To make it full size of a window, make sure that all parent containers of the slider (including body and html) are already stretched (have 100% width and height).

Example HTML structure:

<html>
<head>
....
</head>
<body>
<div id="your-slider-selector" class="royalSlider">...slides...</div>
</body>
</html>

CSS:

/* make "parent" containers 100% width and height */
html, body {
width: 100%;
height: 100%;
overflow:hidden; /* to avoid scrollbars */
}

/* stretch slider to 100% width and height */
.royalSlider {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 50px; /* height of thumbs (if not required set to 0) */
height: auto; /* optionally add !important for WP version so it overrides default value */
width: auto;
}

Also, you need to make sure that autoScaleSlider and autoHeight options are set to false (as they will scale height of slider).

autoScaleSlider:false,
autoHeight: false

If you're using WordPress version, you should add !important to width and height to override default width/height styling that is added via style tag. autoScaleSlider and autoHeight options are in "Size & Scaling section".

Example on JS fiddle – http://jsfiddle.net/DmitrySemenov/P2zt4/

Another approach is to apply size manually via JavaScript in window.resize event. Here is another example – http://jsfiddle.net/DmitrySemenov/Z23Hp/ , or the one with sidebar http://jsfiddle.net/DmitrySemenov/gs78dyjz/

Example of how to resize slider via JS in WordPress version

  • The code below sets width and height of the slider to the size of browser window.
  • Make sure that options "auto height" and "auto scale slider" are disabled in Size & Scaling section.
  • The code can be added to your theme functions.php
  • If you need the gallery to change size based on some other element (instead of window), feel free to adjust $(window).width() and height. For example, you may use width: $('.my-container').width() (where my-container is a class of an element from which you inherit width).
function royalslider_make_full_width_and_height() {
?>

// create function that applies width and height to slider
// that equals dimensions of window,
//
// feel free to modify values in case you need to reduce height of slider by height of the menu or sidebar
var resize = function() {
$('.royalSlider').css({
width: $(window).width(),
height: $(window).height()
});
};

// trigger function on each page resize
$(window).on('resize', resize);

// update size on page load
resize();

// update size after initial change
$('.royalSlider').royalSlider('updateSliderSize', true);

<?php
}
add_action('new_rs_after_js_init_code', 'royalslider_make_full_width_and_height');