JS/jQuery - 更新内容

Question

我在一个 WP 网站上使用 RoyalSlider，和大多数滑块一样，它使用了 overflow:hidden 属性。这当然是正常的 - 但每张幻灯片的标题不能移动到滑块包装之外，因为它会由于溢出而被剪裁。

我想知道是否有人因此可以帮助我使用一些 JS/jQuery 来使用包装器内的标题内容更新包装器外部 div 的内容，以便在它移动的每张幻灯片上，div 外部包装器更新并充当真正的标题。如果这有意义的话。

这是我当前的滑块 HTML 和附带的 jQuery（由于 WP 插件而混乱）。

提前非常感谢， 回复

<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

有两点需要注意：

1. “rsAfterSlideChange”事件。
2. “currSlide”属性。

将两者结合起来，您可能会得到类似的结果（未经测试，从未使用过 RoyalSlider，可能需要稍微调整一下）：

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

您可以像在文档中那样定义滑块实例，或者在您初始化滑块的元素上使用 jQuery 样式调用。据推测，您还可以在 init 期间定义 rsAfterSlideChange。

也就是说，SMacFadyen 的建议应该有效，并且是（恕我直言）更清洁的做事方式。在标题上设置 position: absolute 应该将其从 overflow: hidden 元素中分离出来。请注意，包装器不应该有 position: absolute 应用，只有标题。