Skip to main content

Slider content area shrinks

If you initialize slider when it is not added to DOM (or hidden via display:none) it can not calculate size correctly, as it's impossible to retrieve the size of an element via JavaScript when it's not in a display list.

How to check if this is the issue?

*If slider size is dynamic: try to resize browser window, if after resizing layout looks correctly - this is the issue.

*If slider size is static: change size of root slider element via developer tools and resize browser window. Or run in console jQuery('.royalSlider').royalSlider('updateSliderSize', true);.

How to fix this?

Initialize slider only after it and it's parent are visible, or call `updateSliderSize(true)` method after slider is visible on page:
$('.royalSlider').royalSlider('updateSliderSize', true);

As an alternative, you can trigger jQuery window resize event (which will trigger the same update size method):

$(window).trigger('resize');

If you're using jQuery UI tabs and have a slider in each tab:​

// Instead of .your-tabs-selector, put selector of root element of your tabs (e.g. .ui-tabs)
jQuery(".your-tabs-selector").on("tabsactivate", function(event, ui) {
  ui.newPanel.find('.royalSlider').data('royalSlider').updateSliderSize(true);
});

If you're using Bootstrap tabs:​

jQuery(document).ready(function($) {
   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
       var sliderEl = $( $(e.target).attr('href') ).find('.royalSlider');
       if(sliderEl.length) {
          sliderEl.royalSlider('updateSliderSize', true);
       }
    })
});

Example for WordPress version of slider (jQuery UI tabs)​

// Add this to your theme functions.php
function royalslider_fix_tabs() {
    ?>

jQuery(".ui-tabs").on("tabsactivate", function(event, ui) {
  var slider = ui.newPanel.find('.royalSlider');
  if(slider.length) {
      slider.royalSlider('updateSliderSize', true);
  }
});

    <?php
}
add_action('new_rs_after_js_init_code', 'royalslider_fix_tabs');