Add additional directional arrows around bullets

yazmin's Avatar

yazmin

06 Jun, 2015 03:34 PM

Hi,

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

http://staging.myfrenchlife.org/2014/11/20/coffee-in-paris-conundru...

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?

Thanks!

  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:

    http://help.dimsemenov.com/discussions/problems/57631-rsarrow-repos...

    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:

    http://help.dimsemenov.com/discussions/royalslider-wordpress/3827-d...

    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?

    Thanks!

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

    Dmitry Semenov's Avatar

    Hello,

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

    Dmitry

  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:
    http://demosite.ericmarch.com/sculpture-outdoor-slider/
    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();
        $clonedArrows.addClass('extra');
         sliderEl.find('.rsOverflow').wrap( '<div class="arrows-wrap">' );
    $clonedArrows.appendTo( sliderEl.find('.arrows-wrap') );
        <?php
    }
    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 sliderEl.data('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

Generic

? 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