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

Before adding the code, make sure that options "auto height" and "auto scale slider" are disabled in Size & Scaling section.

// Add this to your theme functions.php
function add_additional_rs_code() {

    // 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', 'add_additional_rs_code');