Add additional directional arrows around bullets

yazmin's Avatar


06 Jun, 2015 03:34 PM


I have the slider setup to the default template and have floated the slider bullets to the right of the slider:

Is there a way to add additional directional arrows (like the ones to the left and right of the slider images, to the left and right of the slider bullets as well?


  1. 1 Posted by yazmin on 06 Jun, 2015 04:58 PM

    yazmin's Avatar

    Hi Dmitry,

    I think I'm half way there with my solution. I used the example you gave here as a jump off point:

    And came up with the following code, which works great to duplicate the arrows:

    var sliderEl = $('.royalSlider');
    $('.rsArrowLeft').clone().prependTo( sliderEl.find('.rsNav') );
    $('.rsArrowRight').clone().appendTo( sliderEl.find('.rsNav') );
    I also took the code you gave here and used it to append a slider counter into the .rsNav div so everything is all in one line:

    The slideshow looks exactly as I want it. However, it doesn't completely work. Now I'm having an issue with the slider bullet navigation working correctly. For example, when I click the number 2, it jumps forward to the third slide, not the 2nd. Then when I try to click to the 2nd slide, it doesn't move. But when I click on the number 1, it jumps to the 2nd slide. Not to mention, my second set of arrows in the rsNav div don't work at all. :/

    Any ideas what I messed up?


  2. Support Staff 2 Posted by Dmitry Semenov on 06 Jun, 2015 07:02 PM

    Dmitry Semenov's Avatar


    rsNav container should not have any additional elements in it. Wrap with with another container and append arrows in it.


  3. 3 Posted by art on 15 Dec, 2017 05:05 AM

    art's Avatar

    I'm running into a similar problem as @yazmin. I followed her threads and came up with the code below to clone the forward/back arrows, add a class of "extra" to them, and to append them to a "arrows-wrap" div around the .rsOverflow div. Like @yazmin, my cloned "extra" arrows are displaying but not working. Any ideas why not?

    You can see them in (in)action here:
    The red arrows are the "extra" arrows, the yellow arrows are the original functioning arrows

    Thanks for your help!

    function add_additional_rs_code() {
        var sliderEl = $('.royalSlider');
        var $clonedArrows = $('.rsArrow').clone();
         sliderEl.find('.rsOverflow').wrap( '<div class="arrows-wrap">' );
    $clonedArrows.appendTo( sliderEl.find('.arrows-wrap') );
    add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
  4. Support Staff 4 Posted by Dmitry Semenov on 15 Dec, 2017 06:51 AM

    Dmitry Semenov's Avatar

    ^ you can only move arrows, but not clone. To make cloned arrows work - bind click event manually and use methods like'royalSlider').next() and prev().

  5. 5 Posted by art on 15 Dec, 2017 03:18 PM

    art's Avatar

    Thanks for clarifying! Great work with the plugin!

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