Question

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

我想知道是否有人可以帮助我使用一些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>

Answer 1

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

需要注意的两件重要事项：

'rsAfterSlideChange'事件。
'currSlide'属性。

结合这两者，你可能会得到类似的东西（未经测试，从未使用过RoyalSlider，可能需要稍微调整一下）：

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

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

那就是说，SMacFadyen的建议应该起作用，并且是（imho）更清洁的做事方式。设置位置：字幕上的绝对值应该将其从溢出：隐藏元素中分离出来。请注意，包装器不应该具有位置：绝对应用，只有字幕。

JS / jQuery - 更新内容

1 个答案: