로얄 슬라이더 캡션을 추가하지 않았습니다.

Question

안녕하세요.

저는 작업중인 사이트에서 로열 슬라이더를 구현하고 있습니다. 나는 랩탑의 이미지 안에서 움직이고있다. 내가 원하는 것은 이미지를 스크롤하여 각 이미지의 맨 아래에 캡션이있을 때이다. 나는 그냥 단순한 이미지를 사용하고 있으므로 문서 here은 이미지에서 alt를 사용하고 플러그인이 그 이미지를 선택한다는 것을 권장한다.

내 HTML은 다음과 같습니다

<div class="laptopBg"> 
    <img src="/images/laptop.png" class="imgBg" width="707" height="400"> 
    <div id="slider-toolkit" class="royalSlider rsDefaultInv"> 
    <img src="/images/t1.jpg" alt="the toolkit landing page" /> 
    <img src="/images/t2.jpg"/> 
    <img src="/images/t3.jpg"/> 
    <img src="/images/t4.jpg"/> 
    </div> 
</div> 

내 왕의 슬라이더에 내가 가지고있는 설정은 다음과 같습니다

function makeRoyalSlider(systemName) { 
    $('#slider-' + systemName).royalSlider({ 
    autoHeight: false, 
    arrowsNav: true, 
    arrowsNavAutoHide: false, 
    fadeInLoadedSlide: false, 
    globalCaption:true, //this is the option they say is required for rendering captions. 
    controlNavigationSpacing: 0, 
    controlNavigation: 'bullets', 
    imageScaleMode: 'fill', 
    imageAlignCenter: true, 
    loop: false, 
    loopRewind: true, 
    numImagesTopReload: 6, 
    keyboardNavEnabled: true, 
    autoScaleSlider: true, 
    autoScaleSliderWidth: 486,  
    autoScaleSliderHeight: 315 
    }).data('royalslider'); 
}; 

사람이 왕의 슬라이더를 사용했다? 또는 당신이 겪은 비슷한 상황이 있었습니까 ?? 나는이

<figure class="rsCaption">This caption <b>HTML</b> text will be used.</figure> 

클래스 "rsCaption"가 존재하지만 단지 몇 가지 이유를 들어 이미지 사이에 새로운 슬라이드

Answer 1

를 작성하는 .js 파일을 처리하지 않도록 globalCaption 플래그 시뮬 뭔가를 사용해보십시오 않았다 . 작성자의 최신 버전과 설명서에 설명 된대로 캡션이 복사되었습니다.

http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js

이 appendTo 당신의 royalSlider 호출을 추가 슬라이더 컨테이너 외부에서 자막을 이동합니다.

// initialize 
$('#photos').royalSlider({ ... globalCaption: true, ... }); 

// Move caption container, auto refresh when slides change 
$('.rsGCaption').appendTo('.new-container');