2015-06-29 101 views
0

我想添加Foundation Orbit Slider到我的網頁。它看起來很簡單,我必須看到圖像和前一個按鈕,但如果我點擊prev和next按鈕,軌道滑塊根本不會移動。圖像不滑動,我不知道爲什麼,因爲我見過很多例子,我認爲我的代碼看起來是一樣的。任何幫助woud理解圖像不滑在軌道滑塊基金會

<html> 
    <head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content="altiria webapp"> 

    <link rel="stylesheet" href="assets/css/foundation.min.css"> 
    <link rel="stylesheet" href="assets/css/font-awesome/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="assets/css/jquery-ui.css"> 
    <link rel="stylesheet" href="assets/css/jquery-ui.structure.css"> 
    <link rel="stylesheet" href="assets/css/jquery-ui.theme.css"> 
    <link rel="stylesheet" href="assets/css/app.css"> 
    <script src="assets/js/modernizr.js"></script> 
    <script src="assets/js/jquery.js"></script> 
    <script src="assets/js/jquery-ui.js"></script> 
    <script src="assets/js/foundation.min.js"></script> 

</head> 

<body> 
    <div class="orbit-container"> 
    <ul class="example-orbit" data-orbit> 
     <li> 
     <img src="assets/images/paisaje1.jpg" alt="slide 1" /> 
     <div class="orbit-caption"> 
      Caption One. 
     </div> 
     </li> 
     <li class="active"> 
     <img src="assets/images/paisaje2.jpg" alt="slide 2" /> 
     <div class="orbit-caption"> 
      Caption Two. 
     </div> 
     </li> 
     <li> 
     <img src="assets/images/paisaje3.jpg" alt="slide 3" /> 
     <div class="orbit-caption"> 
      Caption Three. 
     </div> 
     </li> 
    </ul> 

    <!-- Navigation Arrows --> 
    <a href="#" class="orbit-prev">Prev <span></span></a> 
    <a href="#" class="orbit-next">Next <span></span></a> 

    <!-- Slide Numbers --> 
    <div class="orbit-slide-number"> 
    <span>1</span> of <span>3</span> 
    </div> 

    <!-- Timer and Play/Pause Button --> 
    <div class="orbit-timer"> 
     <span></span> 
     <div class="orbit-progress"></div> 
    </div> 
</div> 
<!-- Bullets --> 
<ol class="orbit-bullets"> 
    <li data-orbit-slide-number="1"></li> 
    <li data-orbit-slide-number="2" class="active"></li> 
    <li data-orbit-slide-number="3"></li> 
</ol> 

<script> 
    $(document).foundation(); 
</script> 

</body> 

enter image description here

回答

2

看起來你有預渲染HTML的結構和呈現的HTML頁面上。您不需要標註評論的代碼塊(導航箭頭,幻燈片編號,計時器,子彈等);基金會將爲你呈現它們。

此外,您的class="example-orbit"可能會產生干擾,除非您需要,否則我建議您將其刪除。

重要提示:根據基金會的網站,「Orbit已被棄用,這意味着它不再被支持。」他們officially recommend使用不同的圖像滑塊而不是它們的軌道。

+0

你是對的斯蒂芬妮。我決定使用Slick,並取得了不錯的成績。但是我有麻煩來設置圖像的寬度。我打算開一個新帖子,因爲我真的被卡住了。感謝您的幫助 –

+0

好的,我剛解決了這個問題。我可以通過爲所有圖像添加css類並設置寬度來設置寬度:1000px;這似乎是正確的 –