Aligning Slide Text to its corresponding Thumbnail

erik's Avatar


28 Aug, 2017 02:51 PM

Hi Dmitry,

I want to add text to my slides which has to be aligned to the corresponding thumbnail. See my attachment.

How would you recommend doing this? I started by trying to get the thumbnail position and then applying it to the margins of .innerContent. But somehow I can't select this elements using jQuery.

<div class="royalSlider">
        <a class="rsContent" href="xxx">
            <img src="xxx.jpg" class="rsImg"/>
            <div class="rsInnerContent"><h3>Slide Text</h3></div>
            <div class="rsTmb">
                <img src="xxx.svg">
                <span>Thumbnail 1</span>
        <a class="rsContent" href="xxx">
            <img src="xxx.jpg" class="rsImg"/>
            <div class="rsInnerContent"><h3>Other Slide Text</h3></div>
            <div class="rsTmb">
                <img src="xxx.svg">
                <span>Thumbnail 2</span>
        imageScaleMode: 'fill',
        imageScalePadding: 0,
        controlNavigation: 'thumbnails',
        arrowsNavAutoHide: false,
        slidesSpacing: 0,
        numImagesToPreload: 3,
        navigateByClick: false,
        minSlideOffset: 0,
        thumbs: {
            spacing: 0,
            autoCenter: false,
            fitInViewport: false
  1. Support Staff 1 Posted by Dmitry Semenov on 28 Aug, 2017 05:07 PM

    Dmitry Semenov's Avatar


    The plugin doesn't keep all slides in DOM, so you'll need to use rsAfterContentSet event that fires after some slide is added, for example:

    var slider = $('.royalSlider').data('royalSlider');
    var updateSlideContent = function(slideContent) {  
            // you may modify content here
        console.log('Slide content element is:', slideContent);
    slider.ev.on('rsAfterContentSet', function(e, slideObject) {
    $('.royalSlider .rsSlide').each(function() {
        updateSlideContent( $(this).children().first() );

    Set data-attribute index on your thumbnail element (rsTmb) and on a slide itself (rsContent) so you can find them easily in DOM.

  2. 2 Posted by erik on 29 Aug, 2017 06:53 PM

    erik's Avatar

    Got it working! Thank you for pointing me in the right direction.

    I still have a lot to learn about javascript, the DOM and jQuery objects though :) For example, how come it is possible to use .children().first() while .find('.className') not always seems to work...

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Already uploaded files

  • slider-example.PNG 988 KB

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