Keyboard Navigation Bug With Multiple Instances of royalSlider

victor.reyem's Avatar


22 Nov, 2012 11:51 PM

I have several instances of royalSlider living on my site. And in JavaScript I declare these instances with the same variable "sliderInstance".

When moving from one slide to another (1 -> 2 for example) with help of the arrowsNav it only changes slides for the "active" sliderInstance. However, when using the keyboard navigation, it changes slides for all sliders. I did not see this at first, but I noticed this when using the different events (such as rsBeforeAnimStart), and outputted data with console.log..

What is up with that? I want to only change the "newest" sliderInstance. By redeclaring sliderInstance (the variable) shouldn't that work?

Now I change the core code and add a conditional statement for all sliders (if hasClass 'active) to solve this problem'.. See the code changes here;

Best /Victor

  1. Support Staff 1 Posted by Dmitry Semenov on 23 Nov, 2012 11:16 AM

    Dmitry Semenov's Avatar


    I don't really understand your situation, are sliders just on one page under each other? Or they're in tabs? How do you think slider should determine which slider is active and which isn't?

    Btw, blocking keyboard nav during animation issue was fixed in 9.2.5 update


  2. 2 Posted by victor.reyem on 23 Nov, 2012 11:25 AM

    victor.reyem's Avatar


    Sorry, here you can see:

    One slider lives in a fancybox and they are loaded as an iframe.

    1) Click the first thumbnail -> Fancybox loads an iframe.
    2) Click thru to last image
    3) Click "Next Project"
    4) Fancybox loads next slide (also an iframe)
    5) Click thru the slides

    ... here were the problem, when beeing on the n:th slider, it also changed the other instances.


  3. 3 Posted by victor.reyem on 23 Nov, 2012 11:35 AM

    victor.reyem's Avatar

    Btw, I dont get addActiveClass option to work. I have version 9.2.0


  4. Support Staff 4 Posted by Dmitry Semenov on 23 Nov, 2012 11:47 AM

    Dmitry Semenov's Avatar
    1. You need to make sure that JS file of activeClass module is included to your build.

    2. Fade transition isn't supported with slides in transparent background, as it's not cross-fade (only one slide fades in). This is done to avoid blink in the middle of cross-fade and optimize performance.

    3. After you close slider you need to call $('.royalSlider').royalSlider('destroy'); method which will remove all events and data.

    4. I'd recommend using latest version of slider, which you can find on slider build tool page.

    Hope it's more clear now )


  5. 5 Posted by victor.reyem on 23 Nov, 2012 11:53 AM

    victor.reyem's Avatar
    1. Yes, sorry!

    2. Okay, yes I saw that when having a longer transitionDuration. However, I just added cross-fade with css3 transitions (opacity) and do not experience any blink in the middle? Tested this with Chrome, Safari & Firefox. Code;

    3. Thanks, this will probably be the proper sollution. However, I still find it weird that when clicking the Arrows it did not affect all the sliders, just the newest added. And when navigation with keyboard, it affects all the sliders. Most possibly something I mess up, but just sayin'..

    4. Cool

    (5). u r the best dmitry, keep it up

  6. victor.reyem closed this discussion on 06 Dec, 2012 05:12 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