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. You may just style empty div with solid background color and then apply styles from it to slider.

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
#your-slider-selector {
    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 */
    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

// Add this to your theme functions.php
// new_rs_after_js_init_code action is available since v3.1.7.
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');