0

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

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

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

非常感谢，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>
4

1 回答 1

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 样式调用。据推测，您还可以在初始化期间定义 rsAfterSlideChange。

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

于 2012-08-16T19:43:54.957 回答