Get current Slide html elements

chris's Avatar


22 Jan, 2013 05:13 AM

I have been using royal slider for a bit and it is a great product, thanks. I currently have the need to get the current active image html info source such as image Src or href= info.

I need a java script function that can get the large displayed picture html tag information. I can find my way from there but does something like this exist. I assume that you would have to get the slider instance and them get the active/current slide from there.

  1. Support Staff 1 Posted by Dmitry Semenov on 22 Jan, 2013 06:11 PM

    Dmitry Semenov's Avatar


    A bunch of slide data:


    Just DOM element:



  2. 2 Posted by chris on 22 Jan, 2013 06:14 PM

    chris's Avatar

    Cool thanks I will give it a try

    Chris Wescott

  3. 3 Posted by jochen on 18 Apr, 2013 07:58 PM

    jochen's Avatar

    I know that this is how I can access the current slide object, but is there also a way to access the NEXT (or previous, or any other) slide object? Something like jQuery('.royalSlider').data('royalSlider').nextSlide.content?


  4. Support Staff 4 Posted by Dmitry Semenov on 19 Apr, 2013 11:06 AM

    Dmitry Semenov's Avatar


    var slider = jQuery('.royalSlider').data('royalSlider');

    You'll probably also need to check for the number of slides, to get correct "next slide" on last one.


  5. 5 Posted by jochen on 19 Apr, 2013 10:06 PM

    jochen's Avatar

    Couldn't get it to work at first, but you pointed me in the right direction. With this line it works for me: slider.slides[slider.currSlideId+1].content

    Many thanks for the quick reply, as always.


  6. 6 Posted by Gökmen on 12 Dec, 2017 09:23 AM

    Gökmen's Avatar

    Hi Dmitry,

    i just want to get the slides ids o nums. So i will change the color of some elements (logo, menu stc.) according to these ids. İs it possible?


  7. Support Staff 7 Posted by Dmitry Semenov on 12 Dec, 2017 12:11 PM

    Dmitry Semenov's Avatar

    @Gökmen, you may use events like rsAfterSlideChange that trigger after slide is switched

  8. 8 Posted by Gökmen on 12 Dec, 2017 05:47 PM

    Gökmen's Avatar

    Thanks for your reply Dmitry.
    I want to change the color of the logo/menu in each slide. When 3rd slide comes to the screen, i want to change the color of the logo so it matches the color of the menu. How can i get the number/id of the 3rd slide? If I can find the number or id, then I can embed this code in the customers panel so they can change the color of the logo/menu according to the slides whichever way they want.

  9. Support Staff 9 Posted by Dmitry Semenov on 12 Dec, 2017 09:31 PM

    Dmitry Semenov's Avatar

    @Gökmen, slider.currSlideId will give you the index of the selected slide, slider.currSlide.content will give you current slide DOM element which you may parse.

    (slider is var slide = $('.royalSlider').data('royalSlider').

  10. 10 Posted by Gökmen on 13 Dec, 2017 02:19 PM

    Gökmen's Avatar

    Hi Dmitry,
    i add the code below. So i change the colors in first slide. Slide Counter didnt take the color. So i change its color from css. Then remove the class white after first slide.

    var sliderNum ='royalSlider');
    function updNum() {
    var curNum = sliderNum.currSlideId
    if (curNum == 0) {
    $("#logo, #nav, #rsSlideCount").addClass('white')
    } else {
    $("#logo, #nav, #rsSlideCount").removeClass('white')
    sliderNum.ev.on('rsAfterSlideChange', updNum);

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