2

Reveal.js フレームワークを使用してスライドショーを作成しようとしていますが、何らかの理由でうまくいきません。空白の画面が表示されるだけです。これが私がこれまでに持っているものです（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>

編集: 解決策は、ボディ終了タグの前に次のコードを追加することです。

<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

4

3 に答える 3

1

実際には、 Reveal.initialize() の呼び出しが必要ですが、空にすることができるので、これで十分です: 

    Reveal.initialize({});
于 2013-07-07T05:12:53.640 に答える
1

あなたはそれを置くことができます

<script>
Reveal.initialize({
    transition: Reveal.getQueryHash().transition || 'default' 
    // choose your skin ===>>>>  default/cube/page/concave/zoom/linear/fade/none
});     
</script>
于 2014-01-27T19:25:10.527 に答える
1

display: noneこれは、css の次の行でセクションを設定しているためです。

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

Firebug のインスペクタ ツールなどを使用して、これらのセクションに設定されている CSS を確認します。

于 2013-03-30T14:56:33.883 に答える