如何使用zurbs基金會的軌道滑塊顯示字幕？

Question

我一直在試圖找出這個問題。任何建議/修復將非常感謝！

源： my source

問題：的字幕不顯示

在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> 

....等（對於軌道滑塊標題）：

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

Answer 1

這是因爲你有 '數據說明' 中的 'IMG' 標籤的屬性，而不是' div'包裝它。更改爲以下，它應該工作

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