Reveal.js幻燈片不工作

我想用Reveal.js框架來製作幻燈片，但由於某種原因，它只是不適合我。它只是顯示一個空白屏幕。這裏是我到目前爲止（jsfiddle）：Reveal.js幻燈片不工作

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

編輯：解決的辦法是結束標記之前添加以下代碼：

<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

來源

2013-03-30 Pamela

這是因爲你是設置您的部分到display: none在這一行中的CSS：

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

使用類似Firebug的檢查器工具來查看爲這些部分設置的CSS。

來源

2013-03-30 14:56:33 flemingslone

謝謝！原來，我不得不在文檔的末尾添加一些額外的JavaScript。 – Pamela

沒問題！真高興你做到了：） – flemingslone

事實上，需要Reveal.initialize（）的調用，但它可以是空的，所以這個就足夠了：

Reveal.initialize({});

來源

2013-07-07 05:12:53 tomcam

你可以把它像

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

來源

2014-01-27 19:25:10

Reveal.js幻燈片不工作

回答

相關問題