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, I recommend to temporarily disable JavaScript or remove js initialization code.

The good way

Style slider via CSS to make it look more nicely for users without JavaScript. (e.g. add float:left to slides, so they will be positioned as rows).

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.

The bad way (if you don't care no-js users)

Hide slider via CSS: .royalSlider { display:none } and display it back directly before slider initialization via JS, in document.ready() $('.royalSlider').css('display', 'block');. This method is not SEO and no-js friendly, but works perfectly.

Examples of solutions:

  1. If slides are under each other, you may add .royalSlider { overflow:hidden } to show just one at a time.

  2. If sldes are on top of each other you may add 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.)
  4. 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.


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