@@ -12,7 +12,7 @@ Curious about how it looks in action? [Check out the demo page](http://lab.hakim
...
@@ -12,7 +12,7 @@ Curious about how it looks in action? [Check out the demo page](http://lab.hakim
Markup heirarchy needs to be ``<div id="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s inside of another ``<section>`` they will be shown as vertical slides. For example:
Markup heirarchy needs to be ``<div id="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s inside of another ``<section>`` they will be shown as vertical slides. For example:
```
```html
<divid="reveal">
<divid="reveal">
<divclass="slides">
<divclass="slides">
<section>Single Horizontal Slide</section>
<section>Single Horizontal Slide</section>
...
@@ -28,7 +28,7 @@ Markup heirarchy needs to be ``<div id="reveal"> <div class="slides"> <section>`
...
@@ -28,7 +28,7 @@ Markup heirarchy needs to be ``<div id="reveal"> <div class="slides"> <section>`
At the end of your page, after ``<script src="js/reveal.js"></script>``, you need to initialize reveal by running the following code. Note that all config values are optional.
At the end of your page, after ``<script src="js/reveal.js"></script>``, you need to initialize reveal by running the following code. Note that all config values are optional.
```
```javascript
Reveal.initialize({
Reveal.initialize({
// Display controls in the bottom right corner
// Display controls in the bottom right corner
controls:true,
controls:true,
...
@@ -73,7 +73,7 @@ If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will
...
@@ -73,7 +73,7 @@ If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will
Furthermore you can also listen to these changes in state via JavaScript:
Furthermore you can also listen to these changes in state via JavaScript:
An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.