How to implement names of prev and next slides with Hover on arrows?

lmjerome21's Avatar


19 May, 2014 02:37 PM

First, congratulations for your awesome work and support.
I would want to display the name of the next and prev slides with Hover on Arrows.
So, when we have the mouse hover the prev arrow, we must see the name of the previous slide and when we have the mouse hover the next arrow, we must see the name of the next slide.
I made this :

$("#next").mouseenter(function () { // Next slide name $(this).html("N1"); }); $("#next").mouseleave(function () { $(this).html("Next"); });

$("#prev").mouseenter(function () { // Prev slide name $(this).html("P1"); }); $("#prev").mouseleave(function () { $(this).html("Prev"); });

But it's not dynamical and I have 5 slides, so the names must change depending what slide is before or after.
Do you have any suggestions to implement this?

  1. Support Staff 1 Posted by Dmitry Semenov on 19 May, 2014 03:30 PM

    Dmitry Semenov's Avatar


    You can access to content of any slide via JS.

    var sliderInstance = $('.your-slider-class').data('royalSlider');
    sliderInstance.ev.on('rsAfterSlideChange', function() {
        sliderInstance.currSlideId // index of current slide
        sliderInstance.slides // array of slides
        sliderInstance.slides[0].content // HTML (DOM element) of first slide

    Full JS API documentation is here


  2. 2 Posted by lmjerome21 on 19 May, 2014 03:40 PM

    lmjerome21's Avatar

    Hi Dimitry,
    Thanks a lot for the precision.
    Would it be possible to explain me how to implement it with more details please?
    I am a beginner in Javascript.

    Thanks again for your help

  3. Support Staff 3 Posted by Dmitry Semenov on 20 May, 2014 11:35 AM

    Dmitry Semenov's Avatar

    Here is basic example for right arrow

  4. 4 Posted by lmjerome21 on 20 May, 2014 01:04 PM

    lmjerome21's Avatar

    Thanks a lot for your help.
    You make my day !

    Have a good day


  5. 5 Posted by mixaroff on 21 Apr, 2015 10:15 PM

    mixaroff's Avatar

    Dmitry, how can I get prevSlideId in your example?

  6. Support Staff 6 Posted by Dmitry Semenov on 22 Apr, 2015 08:00 AM

    Dmitry Semenov's Avatar

    @mixaroff, just save current slide index in some variable and it'll be your prevSlideId when next rsAfterSlideChange will trigger.

  7. 7 Posted by mixaroff on 22 Apr, 2015 11:19 PM

    mixaroff's Avatar

    Dmitry, can you give example, please?

  8. 8 Posted by mixaroff on 22 Apr, 2015 11:40 PM

    mixaroff's Avatar

    Also in your example on js fiddle, after I scroll all slides I get next: side 1 on first slide. Can this be fixed?

  9. Support Staff 9 Posted by Dmitry Semenov on 23 Apr, 2015 02:58 PM

    Dmitry Semenov's Avatar
    var prevSlideId = slider.currSlideId;
    slider.ev.on('rsAfterSlideChange', function() {
      // do smth with prevSlideId
      prevSlideId = slider.currSlideId;
  10. 10 Posted by Corey Ellis on 01 Jul, 2015 05:07 PM

    Corey Ellis's Avatar

    What about applying the reverse to get the next slide?

  11. Support Staff 11 Posted by Dmitry Semenov on 01 Jul, 2015 05:44 PM

    Dmitry Semenov's Avatar

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