Reveal.js Slideshow Not Working

StackOverflow https://stackoverflow.com/questions/15719747

  •  30-03-2022
  •  | 
  •  

Question

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

Was it helpful?

Solution

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.

OTHER TIPS

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

    Reveal.initialize({});

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top