0

私は WP Web サイトで 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>
4

1 に答える 1

1

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

そこで注意すべき重要な点が 2 つあります。

  1. 「rsAfterSlideChange」イベント。
  2. 「currSlide」プロパティ。

2つを組み合わせると、おそらくこれに似たものになります（RoyalSliderはテストされておらず、使用されていないため、少し調整する必要があります）：

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

ドキュメントにあるようにsliderInstanceを定義するか、代わりにスライダーを初期化した要素でjQueryスタイルの呼び出しを使用できます。おそらく、init 中に rsAfterSlideChange を定義することもできます。

そうは言っても、SMacFadyenの提案はうまくいくはずであり、物事を行うための（imho）よりクリーンな方法になるでしょう. キャプションに position: absolute を設定すると、overflow: hidden 要素から抜け出す必要があります。ラッパーには position: absolute を適用せず、キャプションのみを適用する必要があることに注意してください。

于 2012-08-16T19:43:54.957 に答える