Skip to main content

Slider content appears for a second before initialization

The content that you see is how your slider looks if JavaScript is disabled and it makes it visible for search engines and users without JavaScript.

There are some ways how to make it work more properly and what option to choose totally depends on your needs. To simplify styling of slider before it's initialized - disable JavaScript or remove js initialization code during testing.

To style content before the JS initialization​

Selector below will work only before slider is initialized, as slider wraps slides with additional divs after initialization. Instead of YOUR_SLIDE_SELECTOR put selector for root element of your slide. (it may vary depending on your slide markup, e.g. .rsContent or img). Never use div selector there.

.royalSlider > YOUR_SLIDE_SELECTOR {
    /* CSS styles to slides when JS isn't running */
}

If you don't know what > selector does, read this.

As another option, you may hide slider via CSS (.royalSlider { display:none }) and display it back directly before slider initialization via JS, in document.ready() $('.royalSlider').css('display', 'block');.

Examples of solutions​

  1. If slides are under each other, you may add .royalSlider { overflow:hidden } to show just one at a time and then restore it after slider is initialized ($('.royalSlider').css('overflow', 'visible');).

  2. If sides are on top of each other you may add a background to each slide, so they won't look overlayed and you'll see only one.

  3. To hide slides completely until initialization (assuming that your slides root node has class rsContent):

.royalSlider > .rsContent {
    visibility: hidden; 
    /* or display:none depending on your needs... */
}

(If you're using WordPress version, CSS code you can add in any CSS file on page, for example. styles.css of your theme.)

  1. If main images are too big at start, you may set 100% width to them.

These methods aren't included by default in RoyalSlider, because accessibility is prioritized and each type should be handled differently depending on needs the exact gallery.

*In WordPress version, CSS can be added to any CSS file on a page, ideally in styles.css of your child theme.