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 回答