Play Pause Button.

youkhak's Avatar

youkhak

01 Feb, 2017 09:55 PM

I was wondering if its possible to add a play pause button after rsBullets. because now i have the play pause button like this. Problem with this is that the play pause button is outside of the slider container.

```
jQuery('.royalSlider').each(function() {

        var autoStart = true;
        var slider = jQuery(this)[0];

        console.log(slider[0]);

        var button = jQuery('<button class="pause" style="position: absolute; bottom: 23px; left: 35px; padding: 10px; left: 20px; color:#000; z-index: 9999"><i class="fa fa-pause" aria-hidden="true"></i></button>').insertAfter(slider).click(function() {

            if(autoStart) {
                jQuery(this).html('<i class="fa fa-play" aria-hidden="true"></i>');
            } else {
                jQuery(this).html('<i class="fa fa-pause" aria-hidden="true"></i>');
            }
            autoStart = !autoStart;

            slider.royalSlider('toggleAutoPlay');
        });

    });
```

  1. Support Staff 1 Posted by Dmitry Semenov on 02 Feb, 2017 04:13 PM

    Dmitry Semenov's Avatar

    Hello,

    Have you tried to append it directly inside .royalSlider element? (just make sure that you do this after slider is initialized)

    Dmitry

  2. 2 Posted by youkhak on 02 Feb, 2017 09:05 PM

    youkhak's Avatar

    can you please show me how to do it.

  3. Support Staff 3 Posted by Dmitry Semenov on 02 Feb, 2017 10:18 PM

    Dmitry Semenov's Avatar

    Instead of insertAfter(slider), use appendTo(slider).

  4. 4 Posted by youkhak on 03 Feb, 2017 01:53 PM

    youkhak's Avatar

    The problem with that is it will insert it part of a slide within the slider.

  5. Support Staff 5 Posted by Dmitry Semenov on 03 Feb, 2017 05:31 PM

    Dmitry Semenov's Avatar

    Make sure that you run the code after slider initialization (after .royalSlider({ ... }) method).

    If would really help if you link to the page with the issue,

  6. 6 Posted by youkhak on 03 Feb, 2017 05:34 PM

    youkhak's Avatar

    Thanks for the help but this is the WordPress plugin version

  7. Support Staff 7 Posted by Dmitry Semenov on 03 Feb, 2017 10:12 PM

    Dmitry Semenov's Avatar

    Oh. Are you place the code as described here - http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe... ? Or are you adding it to some external file?

  8. 8 Posted by youkhak on 07 Feb, 2017 08:22 PM

    youkhak's Avatar

    How can I do something like this

    
    function add_additional_rs_code() {
        wp_register_script('customRS', get_template_directory_uri() .'/js/royal-pause.js', array('new-royalslider-init-code'), '', true );
        wp_enqueue_script( 'customRS' );
    
    }
    add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
    
  9. Support Staff 9 Posted by Dmitry Semenov on 07 Feb, 2017 10:42 PM

    Dmitry Semenov's Avatar

    You can include only inline code using new_rs_after_js_init_code action. If you want to include external file, use https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_... action.

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