简体   繁体   English

幻灯片未与reveal.js一起运行

[英]slideshow not running with reveal.js

I have a strange problem which I'm guessing has a very simple solution yet I can't seem to find it. 我有一个奇怪的问题,我猜它有一个非常简单的解决方案,但我似乎找不到。 I'm using this tutorial to start my first reveal.js slideshow. 我正在使用教程开始我的第一个show.js幻灯片演示。 The code from the tutorial is: 本教程中的代码是:

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

I save the code into an index.html file and put it with the rest of the reveal files and folders. 我将代码保存到index.html文件中,并将其与其他显示文件和文件夹放在一起。 when double clicking it, it opens in the browser, all the content is rendered, but no slide show. 双击它时,它将在浏览器中打开,呈现所有内容,但没有幻灯片放映。 Instead all the slideshow content is rendered in one slide with no navigation control. 而是将所有幻灯片内容都呈现在一张没有导航控件的幻灯片中。

When double clicking Hakim's index file (the demo presentation file from github, located in the same directory as my html file) it runs perfectly well and as intended. 双击Hakim的索引文件(来自github的演示文件,与我的html文件位于同一目录)时,它可以很好地运行并按预期运行。 I've tried copy pasting the code above to the Hakim's example but the same problem occurs. 我尝试将上面的代码复制粘贴到Hakim的示例中,但是会发生相同的问题。 What am I doing wrong here? 我在这里做错了什么? The code is a tutorial code and seems fine, and the file is located in the proper environment and can locate all reveal libs and css's, so why doesn't it slide-showing? 该代码是教程代码,看起来不错,并且该文件位于正确的环境中,并且可以找到所有显示的libs和css的文件,那么为什么不进行幻灯片显示?

Since this example, and every reveal.js base slide need to be run within the reveal environment, you need to download the reveal.js code from the home page and put your index.html into that directory. 由于此示例以及每个Reveal.js基本幻灯片都需要在Reveal环境中运行,因此您需要从主页下载Reveal.js代码,并将index.html放入该目录中。

The everything should be fine. 一切都应该没问题。

From the index.html code, you can find the reference to such css file such reveal.min.css. 从index.html代码中,您可以找到对此类css文件的引用,例如Reveal.min.css。

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

The means the css/theme/default.css should exist then this page will work as design. 这意味着css / theme / default.css应该存在,然后此页面将作为设计工作。 otherwise, it can only display it as a normal html document. 否则,它只能将其显示为普通的html文档。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM