1

ちょっと、私が正しく理解できない単純なものがあります。

私が取り組んでいるサイトにロイヤル スライダーを実装しています。ラップトップの画像内で実行しています。画像をスクロールして、各画像の下部にキャプションがあるようにしたいです。私は単純な画像を使用しているだけなので、ここのドキュメントでは、画像で 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」が存在するようにしますが、それは画像間に新しいスライドを作成するだけです

4

1 に答える 1

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');
于 2015-06-19T18:31:40.510 に答える