如何获得字幕显示与zurbs基金会's轨道滑块

How to get captions to display with zurbs foundation's orbit slider?

本文关键字：轨道 基金会 字幕 何获得 显示 zurbs      更新时间：2023-09-26

我一直在努力解决这个问题。任何建议/修复都将不胜感激！

来源：我的来源

问题：字幕未显示

html（用于轨道滑块幻灯片）：

<div><img class="art-work" src="art/2.png" alt="" data-caption="#htmlCaption1" /></div>
<div><img class="art-work" src="art/3.png" alt="" data-caption="#htmlCaption2" /></div>
<div><img class="art-work" src="art/4.png" alt="" data-caption="#htmlCaption3" /></div>

等等

html（用于轨道滑块标题）：

<span class="orbit-caption" id="htmlCaption1">Art #1</span>
<span class="orbit-caption" id="htmlCaption2">Art #2</span>
<span class="orbit-caption" id="htmlCaption3">Art #3</span>

等等

html:中的js

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

这是因为'img'标记中有'datacaption'属性，而不是包装它的'div'。将其更改为以下内容，它应该可以使用

<div data-caption="#htmlCaption1"><img class="art-work" src="art/2.png" alt="" /></div>
相关文章：