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 window, make sure that all parent containers of slider (including body and html) allow resizing to full size of window (have 100% width and height).

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, in some cases it might be easier. Here is another example – , or the one with sidebar

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