JS/jQuery - 내용 업데이트

Question

WP 웹 사이트에서 RoyalSlider를 사용하고 있으며 대부분의 슬라이더와 마찬가지로 overflow : hidden 속성을 사용합니다. 물론 정상입니다. 그러나 각 슬라이드의 캡션은 오버플로로 인해 잘 리게되므로 슬라이더 래퍼 외부로 이동할 수 없습니다.

그래서 누군가가 일부 JS/jQuery 래퍼 외부에있는 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

두 가지 중요한 일 :

1. 'rsAfterSlideChange'이벤트입니다.
2. 'currSlide'속성.

두 가지를 결합, 당신은 아마이 비슷한 끝낼 것 (검증되지 않은, 사용되지 RoyalSlider 가능성이 조금 쥐게 될 필요가있을 것이다) :

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

당신은 같은 sliderInstance를 정의 할 수 있습니다 그것은 워드 프로세서에 있거나 슬라이더를 초기화 한 요소에서 jQuery 스타일의 호출을 사용합니다. 아마도 init 중에 rsAfterSlideChange를 정의 할 수도 있습니다.

그렇다면 SMacFadyen의 제안은 효과가 있으며 일을 처리하기위한 (이모) 방법 일 것입니다. 설정 위치 : 캡션의 절대 값은 오버 플로우 : 숨겨진 요소에서 벗어나야합니다. 래퍼에는 절대 위치가 적용되지 않아야하며 캡션 만 적용됩니다.