基金會4軌道滑塊全部圖像一次/不可滾動

我想不通爲什麼滑塊不會完全像一個文檔頁面放在這裏進行： http://foundation.zurb.com/docs/components/orbit.html 基金會4軌道滑塊全部圖像一次/不可滾動

我們的網站是 here:

這是代碼。我認爲，這應該是這個最小的標記和中剩下的東西是應該在以後添加：

 <ul data-orbit> 
    <li> 
    <img src="img/sliders/lightcubebeta1000.png" > 
    <div class="orbit-caption">...</div> 
    </li> 
    <li> 
    <img src="img/sliders/hammertime1000.png"> 
    <div class="orbit-caption">...</div> 
    </li> 
    <li> 
    <img src= "img/sliders/alarmclockbeta1000.png"> 
    <div class="orbit-caption">...</div> 
    </li> 
</ul>

初始化的Javascript：

<!-- Javascript for Orbit Image Slider -->  
<script> 
     document.write('<script src=`javascripts/vendor/' 
      + ('__proto__' in {} ? 'zepto' : 'jquery') 
      + '.js><\/script>') 
</script> 

<script src= "javascripts/foundation/foundation.js"></script> 
<script src= "javascripts/foundation/foundation.dropdown.js"></script> 
<script src= "javascripts/foundation/foundation.section.js"></script> 
<script src= "javascripts/foundation/foundation.topbar.js"></script> 
<script src= "javascripts/foundation/foundation.orbit.js"></script> 

<!-- Initialize Foundation --> 

<script> 

    $(document).foundation('orbit', { 
    timer_speed: 10000, 
    pause_on_hover: true, 
    resume_on_mouseout: true, 
    animation_speed: 500, 
    bullets: true, 
    stack_on_small: true, 
    container_class: 'orbit-container', 
    stack_on_small_class: 'orbit-stack-on-small', 
    next_class: 'orbit-next', 
    prev_class: 'orbit-prev', 
    timer_container_class: 'orbit-timer', 
    timer_paused_class: 'paused', 
    timer_progress_class: 'orbit-progress', 
    slides_container_class: 'orbit-slides-container', 
    bullets_container_class: 'orbit-bullets', 
    bullets_active_class: 'active', 
    slide_number_class: 'orbit-slide-number', 
    caption_class: 'orbit-caption', 
    active_slide_class: 'active', 
    orbit_transition_class: 'orbit-transitioning' 
}); 

</script>

儘管複製我的最大努力在文檔頁面上的示例中，軌道圖像滑塊使用項目符號和箭頭從上至下顯示所有圖像。我是否犯了錯誤，或者在基金會4文檔中有沒有出現錯誤？

謝謝！

來源

2013-06-21 cii

謝謝lolmaus。原來，改變<ul class="data-orbit">回< ul data-orbit>後改變：

<script> 
    document.write('<script src=/js/vendor/' 
    + ('__proto__' in {} ? 'zepto' : 'jquery') 
    + '.js><\/script>'); 
</script>

到

<script> 
     document.write('<script src=`javascripts/vendor/' 
      + ('__proto__' in {} ? 'zepto' : 'jquery') 
      + '.js><\/script>') 
</script>

然後，它似乎正確加載仄或jQuery的，與軌道腳本一起。我一定錯過了改變，因爲所有的JavaScript文件都在新文件夾中。我一定很累。再次感謝！

來源

2013-06-21 18:07:47 cii

所以我的答案解決了你的問題，但你是不是接受它，也不贊成它？ –

這是正確的方向，但你偏離了文檔。雖然您的示例實現確實提倡了最佳實踐（使用CDN），但我試圖根據基礎文檔中的代碼找出爲什麼它不起作用。你的答案可能比他們的代碼更好，但我當時不知道。所以我給了你一個贊成票，但我沒有給你答案。如果我知道你的代碼更好，爲什麼當我關閉它時，你會得到答案和贊成。祝一週愉快，謝謝。 – cii

您似乎沒有仔細關注Foundation文檔的Javascript Installation section。

你錯過了至少兩個步驟：

需要jQuery的;
初始化基金會。

此外，您在問題中提供的代碼與您在實際頁面上的代碼不同。在您使用<ul class= "data-orbit">的頁面上，正確的代碼是<ul data-orbit>。

這裏的一切設置正確的演示：http://jsbin.com/ixuluw/3/edit

來源

2013-06-21 08:32:53

它確實使它工作。我以爲： loaded zepto或jquery。此外，我似乎暗示，foundation.min.css在羅盤/ sass版本的基礎版本中不可用。我錯了嗎？ – cii

基金會4軌道滑塊全部圖像一次/不可滾動

回答

相關問題