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