Royal Slider not adding caption

Question

hey there just a simple one that i cant seem to get right.

i am implementing the royal slider on the site i am working on. i have it running inside a image of a laptop, what i would like is when you are scrolling through the images for there to be a caption at the bottom of each image. i am just using simple images so the documentation here recommended that i just use the alt in the image and the plugin will just pick it up, only that it doesnt.

my HTML looks like this:

<div class="laptopBg">
  <img src="/images/laptop.png" class="imgBg" width="707" height="400">
  <div id="slider-toolkit" class="royalSlider rsDefaultInv">
    <img src="/images/t1.jpg" alt="the toolkit landing page" />
    <img src="/images/t2.jpg"/>
    <img src="/images/t3.jpg"/>
    <img src="/images/t4.jpg"/>
  </div>
</div>

the settings i have in my royal slider are the following:

 function makeRoyalSlider(systemName) {
   $('#slider-' + systemName).royalSlider({
    autoHeight: false,
    arrowsNav: true,
    arrowsNavAutoHide: false,
    fadeInLoadedSlide: false,
    globalCaption:true, //this is the option they say is required for rendering captions.
    controlNavigationSpacing: 0,
    controlNavigation: 'bullets',
    imageScaleMode: 'fill',
    imageAlignCenter: true,
    loop: false,
    loopRewind: true,
    numImagesTopReload: 6,
    keyboardNavEnabled: true,
    autoScaleSlider: true,  
    autoScaleSliderWidth: 486,     
    autoScaleSliderHeight: 315
  }).data('royalslider');
 };

has anyone worked with the royal slider?? or had a similar situation that you got through?? i did try using something simular with this

 <figure class="rsCaption">This caption <b>HTML</b> text will be used.</figure>

so that the class "rsCaption" is present but that just creates a new slide between the images

Hey @DylanValade, we eventually went with a different slider. But i did try your solution and it seems to work. — legendary_rob, Jun 29 '15 at 11:06
We went with Revolution slider, found it on the Envato site. http://revolution.themepunch.com/. — legendary_rob, Jul 02 '15 at 08:45

score 1 · Accepted Answer · answered Jun 19 '15 at 18:31

For some reason the .js file did not handle the globalCaption flag. Copied the latest version from the author and captions worked as explained in the documentation.

http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js

To move the captions outside the slider container add this appendTo your royalSlider call.

// initialize
$('#photos').royalSlider({ ... globalCaption: true, ... });

// Move caption container, auto refresh when slides change
$('.rsGCaption').appendTo('.new-container');

Royal Slider not adding caption

1 Answers1