2014-02-09 64 views
1

我有我猜有一個非常簡單的解決方案但我似乎無法找到它一個奇怪的問題運行。我正在使用this教程開始我的第一個reveal.js幻燈片。從本教程的代碼是:幻燈片不reveal.js

<!doctype html> 
<html lang="en">  
<head> 
    <meta charset="utf-8"> 
    <title>Reveal.js 3 Slide Demo</title> 
    <link rel="stylesheet" href="css/reveal.min.css"> 
    <link rel="stylesheet" href="css/theme/default.css" id="theme">  
    <!--Add support for earlier versions of Internet Explorer --> 
    <!--[if lt IE 9]> 
    <script src="lib/js/html5shiv.js"></script> 
    <![endif]--> 
</head> 

<body> 
    <!-- Wrap the entire slide show in a div using the "reveal" class. --> 
    <div class="reveal"> 
     <!-- Wrap all slides in a single "slides" class --> 
     <div class="slides"> 

      <!-- ALL SLIDES GO HERE --> 
      <!-- Each section element contains an individual slide --> 
      <section> 
       <h1>About My Product</h1> 
       <p>My product discussed here</p>   
      </section> 

      <section id="show-a-link"> 
       <h1>Show a live link</h1> 
       <p>Slide 2 discussed here</p> 
       <p>See <a href="http://www.htmlcheats.com">HTMLCheats.com</a><p> 
      </section> 

      <section> 
       <h1>Slide 3</h1> 
       <p>How does one revisit an arbitrary slide in code?</p> 
       <p>Visit internal slide<a href="#/show-a-link"> 2</a> 
      </section> 

      </div> 
    </div> 
    <script src="lib/js/head.min.js"></script> 
    <script src="js/reveal.min.js"></script> 

    <script> 
     // Required, even if empty. 
     Reveal.initialize({ 
     }); 
    </script> 
</body> 
</html> 

我的代碼保存到一個index.html文件,並把它與顯示文件和文件夾的其餘部分。當雙擊它時,它會在瀏覽器中打開,所有內容都被渲染,但沒有幻燈片放映。相反,所有的幻燈片內容都會在一張幻燈片中呈現,無需導航控制。

當雙擊哈基姆的索引文件(從GitHub演示文稿文件,位於同一目錄作爲我的HTML文件)它運轉很好,並如預期。我試着將上面的代碼複製粘貼到Hakim的例子中,但是也出現了同樣的問題。我在這裏做錯了什麼?該代碼是一個教程代碼,看起來很好,該文件位於適當的環境中,可以找到所有揭示庫和CSS,所以爲什麼它不顯示幻燈片?

+0

該代碼是正確的(我複製/粘貼它,它的工作原理)。你可以嘗試打開你的幻燈片上的螢火蟲,檢查是否有任何JS /網絡問題,如果每個包含的文件確實被發現 – gturri

+0

我不熟悉該工具..但我沒有看到爲什麼文件不加載的原因,如果他們是從同一個文件夾中的不同HTML加載。此外,加載的幻燈片正確的主題,但它都是在同一張幻燈片中呈現,沒有動畫。 – idoda

回答

1

由於這個例子中,每一個reveal.js基部滑動需要在顯示環境中運行,你需要下載從主頁的reveal.js代碼,並把你的index.html到該目錄中。

的一切都應該罰款。

從index.html的代碼,你可以找到參考這樣的css文件等reveal.min.css。

<link rel="stylesheet" href="css/theme/default.css" id="theme"> 

這意味着css/theme/default.css應該存在,那麼這個頁面將作爲設計工作。否則,它只能將其顯示爲正常的html文檔。