Slider content area shrinks

If you initialize slider when it (or its parent) is not added to DOM (or hidden via display:none, or depends on nearby element), it can not calculate size properly, because it's impossible to get the size of an element via JavaScript when it's not in display list.

How to check if this is the issue?

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

If slider size is static: change size of root slider element via Chrome dev 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 Mobile, initialize slider in pageload or pagecreate event.

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 article? Know how to improve it? Please open support ticket.