我正在尝试使用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>
答案 0 :(得分:1)
这是因为你在css的这一行中将你的部分设置为display: none
:
.reveal .slides>section,.reveal .slides>section>section
使用类似Firebug的检查工具来查看为这些部分设置的CSS。
答案 1 :(得分:1)
实际上,调用Reveal.initialize()是必需的,但它可以为空,所以这就足够了:
Reveal.initialize({});
答案 2 :(得分:1)
你可以像
一样<script>
Reveal.initialize({
transition: Reveal.getQueryHash().transition || 'default'
// choose your skin ===>>>> default/cube/page/concave/zoom/linear/fade/none
});
</script>