javascript – 轨道滑块：字幕不显示

我正在尝试将Foundation 3幻灯片Orbit实现到我的Foundation移动响应式设计中.当我尝试在幻灯片上放置标题时,没有显示标题栏.这是基于包含的主页模板,因此滑块组件的CSS没有从提供的内容中更改,但包含了覆盖CSS文件,但不应影响任何内容. (style.css)我试过两种方法,都不行. You can see the issue here.感谢您给我的任何帮助,我是响应式设计的新手.

      <div id="slider">

<img data-caption="#slide1" src="http://placehold.it/1000x400&text=[img 1]" />
<img data-caption="#slide2" src="http://placehold.it/1000x400&text=[img 2]" />
<img data-caption="#slide3" src="http://placehold.it/1000x400&text=[img 3]" />

      </div>

<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>

    </div>

我也尝试过：

      <div id="slider">

<div data-caption="#slide1"> <img src="http://placehold.it/1000x400&text=[img 1]" /></div>
<div data-caption="#slide2"><img src="http://placehold.it/1000x400&text=[img 2]" /></div>
<div data-caption="#slide3"><img src="http://placehold.it/1000x400&text=[img 3]" /></div>

      </div>

<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>

    </div>

我的启动JS：

  <script type="text/javascript">
   $(window).load(function() {
       $('#slider').orbit({
             bullets: false,
             timer: true,
             captions: true,
             animation: 'fade' });
   });
</script>

解决方法:

我刚刚遇到了这个问题.我设法通过在“jquery.foundation.orbit.js”中的第391行之前移动第394行来解决此问题.问题是当前版本的轨道在解析.orbit-caption跨度中的文本之前从数据标题的值中删除了#.

所以我没有看到你的代码示例有什么问题.你只需要自己修复“jquery.foundation.orbit.js”,或者等待修复它的下一个版本.

当前版本：

390. // if location selector starts with '#', remove it so we don't see id="#selector"
391. if (captionLocation.charAt(0) == '#') {
392.     captionLocation = captionLocation.substring(1, captionLocation.length);
393. }
394. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity

修正版：

390. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
391. // if location selector starts with '#', remove it so we don't see id="#selector"
392. if (captionLocation.charAt(0) == '#') {
393.     captionLocation = captionLocation.substring(1, captionLocation.length);
394. }

如果您使用的是“foundation.min.js”,则需要编辑第46行.查找：

t.charAt(0)== “#” &安培;及(T = t.substring(1,t.length))中,n = E(t)的html的()

并将这两个部分反转为如下所示：

N = E(t)的html的(),t.charAt(0)== “#” &安培;及(T = t.substring(1,t.length))

我没有测试过看看是否会破坏其他任何内容,但它确实解决了您遇到的标题问题.

标签：javascript,jquery,responsive-design,slider
来源： https://codeday.me/bug/20190826/1724675.html