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:

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


/* 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).

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 –

Another approach is to apply size manually via JavaScript in window.resize event. Here is another example – , or the one with sidebar

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() {
width: $(window).width(),
height: $(window).height()

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

// update size on page load

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

add_action('new_rs_after_js_init_code', 'royalslider_make_full_width_and_height');