CODEWITHSUNDEEP
javascriptslideshowreveal.js
Pamela
Pamela

Reputation: 517

Reveal.js Slideshow Not Working

I'm trying to use the Reveal.js framework to make a slideshow, but for some reason, it just won't work for me. It's just displaying a blank screen. Here's what I have so far (jsfiddle):

    <!DOCTYPE HTML>
    <html>
    <head>
    <link type="text/css" href="http://lab.hakim.se/reveal-js/css/reveal.min.css" rel="stylesheet" media="all">
    </head>

    <body>
    <div class="reveal">
        <div class="slides">
            <section>hello world</section>
            <section>second slide</section>
            <section>third</section>
        </div>
    </div>

    <script type="text/javascript" src="http://lab.hakim.se/reveal-js/js/reveal.min.js"></script>
    </body>
</html>

EDIT: The solution is to add the following code before the end body tag:

<script type="text/javascript">
Reveal.initialize({

// Display controls in the bottom right corner
controls: true,

// Display a presentation progress bar
progress: true,

// Push each slide change to the browser history
history: false,

// Enable keyboard shortcuts for navigation
keyboard: true,

// Enable the slide overview mode
overview: true,

// Vertical centering of slides
center: true,

// Loop the presentation
loop: false,

// Change the presentation direction to be RTL
rtl: false,

// Number of milliseconds between automatically proceeding to the 
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
autoSlide: 0,

// Enable slide navigation via mouse wheel
mouseWheel: false,

// Apply a 3D roll to links on hover
rollingLinks: true,

// Transition style
transition: 'default' // default/cube/page/concave/zoom/linear/fade/none

});
</script>

https://github.com/hakimel/reveal.js

Upvotes: 3

Views: 5197

Answers (3)

Juan Carlos Dieguez
Juan Carlos Dieguez

Reputation: 11

You can put it like

<script>
Reveal.initialize({
    transition: Reveal.getQueryHash().transition || 'default' 
    // choose your skin ===>>>>  default/cube/page/concave/zoom/linear/fade/none
});     
</script>

Upvotes: 1

tomcam
tomcam

Reputation: 5285

Actually, the call to Reveal.initialize() is required but it can be empty, so this will suffice: 

    Reveal.initialize({});

Upvotes: 1

Fleming Slone
Fleming Slone

Reputation: 177

It's because you are setting your sections to display: none in this line in the css:

.reveal .slides>section,.reveal .slides>section>section

Use something like Firebug's inspector tool to look at the CSS being set for those sections.

Upvotes: 1

Related Questions