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):


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) {

If you're using Bootstrap tabs:

jQuery(document).ready(function($) {
   $('a[data-toggle="tab"]').on('', function (e) {
       var sliderEl = $( $('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);

add_action('new_rs_after_js_init_code', 'royalslider_fix_tabs');

Found a mistake in the article? Know how to improve it? Please open support ticket.