2014-02-09 89 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文档。