rsAfterInit Call's Avatar

04 Dec, 2012 05:24 PM

Since the slider doesn't load until after the Dom has loaded, I get a flash of the old HTML structure before the slider kicks in. I would like to have the slider not show at all, then fade in after the slider has initialized. I think that the API call 'rsAfterInit' would work for this, but I can't seem to use it because it doesn't fire if the slider is initialized. The problem I am having is my lack of Javascript experience and how to get access to the slider before it initialized. Here is my code:

`jQuery(window).load(function() {

var slider = jQuery("#interactive-slider").royalSlider({
    autoHeight: true,
    controlNavigation: 'thumbnails',
    navigateByClick: false,
    sliderDrag: false,
    keyboardNavEnabled: true,
    thumbs: {
        // thumbnails options go gere
        spacing: 4,
        arrowsAutoHide: false,
        autoCenter: false,

slider.ev.on('rsAfterInit', function() {
    alert('hey there');

var sliderHtml = jQuery("#interactive-slider");


Thanks in advance for all your help!

This discussion was closed! See this FAQ for more information:

  1. 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...

    See more..
  1. closed this discussion on 04 Dec, 2012 05:27 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac