Question

I’m using RoyalSlider on a WP website and, like most sliders, it uses the overflow:hidden property. This is, of course, normal – but the captions for each slide cannot be moved outside the slider wrapper as it’ll become clipped due to the overflow.

I’m wondering if someone can therefore help me with some JS/jQuery to update the contents of a div outside of the wrapper with the contents of the caption inside the wrapper so as each slide it moved on, the div outside the wrapper updates and acts as the real caption. If that makes sense.

This is my current HTML of the slider and the jQuery that comes with it (messy due to the WP plugin).

Many thanks in advance,
R

<div class="landing-slider-container">
            <div id="royalslider-1" class="royalSlider default" style="width:1025px; height:600px;">
                <ul class="royalSlidesContainer">
                    <li data-src="EVA-BERENDES-0263.jpg" class="royalSlide">
                        <div class="royalHtmlContent">
                            People &amp; Events Will Be The Decoration<br>
                            19 Feb - 16 Apr
                        </div>
                    </li>
                    <li data-src="EVA-BERENDES-0263.jpg" class="royalSlide">
                        <div class="royalHtmlContent">
                            People &amp; Events Will Be The Decoration<br>
                            19 Feb - 16 Apr
                        </div>
                    </li>
                </ul>
            </div>

<script type="text/javascript">
jQuery(document).ready(function() {jQuery("#royalslider-1").royalSlider({"width":1025,"height":600,"skin":"default","preloadSkin":true,"lazyLoading":true,"preloadNearbyImages":true,"slideshowEnabled":false,"slideshowDelay":5000,"slideshowPauseOnHover":true,"slideshowAutoStart":true,"keyboardNavEnabled":true,"dragUsingMouse":false,"slideSpacing":50,"startSlideIndex":0,"imageAlignCenter":true,"imageScaleMode":"none","autoScaleSlider":false,"autoScaleSliderWidth":960,"autoScaleSliderHeight":400,"slideTransitionType":"move","slideTransitionSpeed":400,"slideTransitionEasing":"easeInOutSine","directionNavEnabled":false,"directionNavAutoHide":false,"hideArrowOnLastSlide":true,"controlNavigationType":"none","auto-generate-images":false,"auto-generate-thumbs":false,"thumb-width":60,"thumb-height":60,"captionAnimationEnabled":true,"captionShowFadeEffect":true,"captionShowMoveEffect":"movetop","captionMoveOffset":20,"captionShowSpeed":400,"captionShowEasing":"easeInOutSine","captionShowDelay":200,"controlNavEnabled":false,"captionShowEffects":["fade","movetop"]});});
            </script>

                <div id="current-caption"></div>

Answer 1

http://dimsemenov.com/plugins/royal-slider/documentation/#api

Two important things to note there:

1. The ‘rsAfterSlideChange’ event.
2. The ‘currSlide’ property.

Combining the two, you’d probably end up with something similar to this (untested, never used RoyalSlider, will likely need to be tweaked a bit):

sliderInstance.ev.on('rsAfterSlideChange', function() {
    $('#current-caption').text(sliderInstance.currSlide.find('.royalHtmlContent').text());
});

You can define sliderInstance like it is in the docs, or use jQuery-style calls on the element you initialized the slider on instead. Presumably, you could also define rsAfterSlideChange during init.

That said, SMacFadyen’s suggestion should work and would be the (imho) cleaner way to do things. Setting position: absolute on the captions should break it out of the overflow: hidden element. Note that the wrapper should not have position: absolute applied, only the captions.