CODEWITHSUNDEEP
htmlcssreveal.js
idoda
idoda

Reputation: 6428

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. 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. 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. I've tried copy pasting the code above to the Hakim's example but the same problem occurs. 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?

Upvotes: 2

Views: 2398

Answers (1)

lucky1928
lucky1928

Reputation: 8841

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.

The everything should be fine.

From the index.html code, you can find the reference to such css file such 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. otherwise, it can only display it as a normal html document.

Upvotes: 1

Related Questions