controlNavigation option not working

hcortesini's Avatar


15 Apr, 2013 01:16 PM

Hi, I can't get the controlNavigation option to work on my slideshow. I see arrows only and want controlNavigation to change to tabs. Other options work ok in the same code block. What could be wrong? Below is some code. Initialization area is near the bottom. The loop option works but not controlNavigation. Thank you.

<!-- jQuery, 1.7+ is required -->
<script  src="/royalslider/jquery-1.8.3.min.js"></script>
<!-- main slider JS, get it from build tool -->
<script src="/royalslider/jquery.royalslider.js"></script>

<!-- main slider style -->
<link href="/royalslider/royalslider.css" rel="stylesheet">
<!-- selected skin style -->
<link href="/royalslider/skins/default/rs-default.css" rel="stylesheet">

<!-- slider css -->
        /* you may put here additional slider CSS */
        /* but it'll be better if you move it to separate CSS file that your site uses */

<!-- actual slider code -->

<!-- simple image slide --> Caption 1
<!-- simple image slide -->
<img data-rsw="800" data-rsh="600"class="rsImg" src="/slideshow/trade2.jpg" alt="image desc" />

<!-- simple image slide -->
<img data-rsw="800" data-rsh="600"class="rsImg" src="/slideshow/trade3.jpg" alt="image desc" />

<!-- simple image slide -->
<img data-rsw="800" data-rsh="600"class="rsImg" src="/slideshow/trade5.jpg" alt="image desc" />

<!-- simple image slide -->
<img data-rsw="800" data-rsh="600"class="rsImg" src="/slideshow/trade7.jpg" alt="image desc" />

// Slider initialization, you may put this part of code in JS file
jQuery(document).ready(function($) {

    // slider initialization
        // example of slider options            
        controlNavigation: 'tabs',
        loop: true,            

  1. Support Staff 1 Posted by Dmitry Semenov on 15 Apr, 2013 05:10 PM

    Dmitry Semenov's Avatar


    Most likely you have included only core JS file, without tabs module. Include it manually, or download build from build tool


  2. 2 Posted by hcortesini on 15 Apr, 2013 06:18 PM

    hcortesini's Avatar

    Yes thank you Dmitry, you are correct! That worked!


  3. 3 Posted by techie on 27 Feb, 2018 06:58 AM

    techie's Avatar

    HI Dmitry,
    i have a question, i am using royal slider, i have a text with image per slider, but there are some cases in my scenario where there might not be image in a slider but text should display. but when i add "rsImg" class to img tag the slider with no image is disappearing and not even text is displayed, but when i remove the class "rsImg" text is getting displayed. but on page load first slider image is getting half load.

    please suggest me solution.

  4. Support Staff 4 Posted by Dmitry Semenov on 27 Feb, 2018 09:38 AM

    Dmitry Semenov's Avatar

    @techie, not sure if I fully understand the issue, are you looking for something like this ? If you can't add rsImg class, you may use padding-bottom trick to maintain image area

  5. 5 Posted by Hi dmitry on 28 Feb, 2018 07:08 AM

    Hi dmitry's Avatar

    Yes this was usefull as we could find out, that src was coming undefined and we kept null check and its working fine., thanku.

    Another issue: in onload from 6th image onwards height of the image is getting zero when i am trying to get the image height dynamically. as we are taking rsActiveslide height for calculating the height of the image.

    please suggest the solution

  6. Support Staff 6 Posted by Dmitry Semenov on 28 Feb, 2018 02:08 PM

    Dmitry Semenov's Avatar

    I'd need a link to an isolated example, as I'm not sure if I fully understand the issue.

  7. 7 Posted by techie on 09 Mar, 2018 11:03 AM

    techie's Avatar

    Hi dimitry,
    sorry for late reply,
    please find the jsfiddle below to understand my issue.

    After page load, please click the sixth thumbnail and check in console as image height is getting 0, as we are taking height of the image and adding to rsoverflow to adjust the height dynamically.

    please suggest me the solution.

  8. Support Staff 8 Posted by Dmitry Semenov on 09 Mar, 2018 03:34 PM

    Dmitry Semenov's Avatar

    The API doesn't guarantee that image will be loaded in rsAfterSldieChange event. The event triggers just after slide change, an image may finish loading later.

    The event that triggers after any image is loaded is rsAfterContentSet.


  9. 9 Posted by techie on 12 Mar, 2018 08:08 AM

    techie's Avatar

    Hi Dimitry,
    when i am trying to write below code,

     i.ev.on("rsAfterContentSet", function (e, slideObject) {
                var n = i.globalCaption.find(".category").height()
                  , s = e.currentTarget.currSlide.content.height() + 16;
                    "padding-top": n,
                    height: s + n
                }, "slow", "linear")

    its not getting height for everyimage, as function loads only first time and constant height is applied.

  10. Support Staff 10 Posted by Dmitry Semenov on 12 Mar, 2018 12:13 PM

    Dmitry Semenov's Avatar

    rsAfterContentSet fires after an image is loaded or content is added to any slide, not just to the selected (current) one.

    Besides that, you should avoid modifying rsOverflow, as its size is based on slider root element. If you want to adjust height of slides based on the content - use autoHeight option, as shown here

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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