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');。

Tile

皇家滑块没有添加标题

1 个答案: