matheus-souza/reveal-index-example.html

## reveal-index-example.html
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>reveal.js</title>

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>Slide 1</section>
				<section>Slide 2</section>
				<section>
					<section>Slide vertical 1</section>
					<section>Slide vertical 2</section>
					<section>Slide vertical 3</section>
				</section>

				<!-- fundos com cores -->
				<section data-background="#ff0000"></section>

				<!-- fundos com imagens -->
				<section data-background="image.png"></section>

				<!-- fundos com imagens em tamanho definido e se repetindo -->
				<section data-background="image.png" data-background-size="100px" data-background-repeat="repeat"></section>

				<!-- vídeos em loop! -->
				<section data-background-video="video" data-background-video-loop></section>

				<!-- um site dentro do próprio slide! -->
				<section data-background-iframe="https://willianjusten.com.br"></section>

				<!-- Essa transição irá ser passada como um zoom. -->
				<section data-transition="zoom">Zoom</section>

				<!-- Escolha a velocidade do slide entre: default, fast or slow! -->
				<section data-transition-speed="fast">Fast</section>

				<!-- Transição padrão de deslizar para o lado. -->
				<section data-transition="slide">Slide</section>

				<!-- Desliza quando entra (slide-in) e esmaece quando sai. (fade-out) -->
				<section data-transition="slide-in fade-out">Esmaece quando sai</section>

				<!-- Esmaece quando entra (fade-in) e desliza quando sai. (slide-out) -->
				<section data-transition="fade-in slide-out">Desliza quando sai</section>

				<section>
					<p class="fragment grow">grow</p>
					<p class="fragment shrink">shrink</p>
					<p class="fragment fade-up">fade-up (also down, left and right!)</p>
					<p class="fragment current-visible">visible only once</p>
					<p class="fragment highlight-current-blue">blue only once</p>
					<p class="fragment highlight-red">highlight-red</p>
					<p class="fragment highlight-green">highlight-green</p>
					<p class="fragment highlight-blue">highlight-blue</p>
				</section>
				<section>
					<span class="fragment fade-in">
						<span class="fragment fade-out">I'll fade in, then out</span>
					</span>
				</section>

				<section>
					<span class="fragment fade-in">I'll fade in, then out[...]</span>
					<span class="fragment fade-in">[...]I'll fade in, then out[...]</span>
					<span class="fragment fade-in">[...]I'll fade in, then out[...]</span>
				</section>

				<section>
					<p class="fragment" data-fragment-index="3">Appears last</p>
					<p class="fragment" data-fragment-index="1">Appears first</p>
					<p class="fragment" data-fragment-index="2">Appears second</p>
				</section>

				<section>
					<pre><code data-trim data-noescape>
				(def lazy-fib
				  (concat
				   [0 1]
				   <mark>((fn rfib [a b]</mark>
				        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
					</code></pre>
				</section>
				<section>
					<video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
				</section>
				<section>
					<h2>This video will use up the remaining space on the slide</h2>
				    <video class="stretch" src="https://www.youtube.com/watch?v=-9_zcFmvbMA"></video>
				</section>


			</div>
		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>
			// More info https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				history: true,

				// More info https://github.com/hakimel/reveal.js#dependencies
				dependencies: [
					{ src: 'plugin/markdown/marked.js' },
					{ src: 'plugin/markdown/markdown.js' },
					{ src: 'plugin/notes/notes.js', async: true },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
				]
			});

			/*exibe numero na pagina
			Reveal.configure({ slideNumber: true });

			exibe numero na pagina com total
			Reveal.configure({ slideNumber: 'c/t' }); */

			/*para exportar para pdf precisa configurar o tamanho padrão do slide
			Reveal.initialize({
				// The "normal" size of the presentation, aspect ratio will be preserved
				// when the presentation is scaled to fit different resolutions. Can be
				// specified using percentage units.
				width: 960,
				height: 700,

				// Factor of the display size that should remain empty around the content
				margin: 0.1,

				// Bounds for smallest/largest possible scale to apply to content
				minScale: 0.2,
				maxScale: 1.5
			});
			ou
			Reveal.initialize({
				width: "100%",
				height: "100%",
				margin: 0,
				minScale: 1,
				maxScale: 1
			});*/

		</script>
	</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>reveal.js</title>

	<link rel="stylesheet" href="css/reveal.css">
	<link rel="stylesheet" href="css/theme/black.css">

	<!-- Theme used for syntax highlighting of code -->
	<link rel="stylesheet" href="lib/css/zenburn.css">

	<!-- Printing and PDF exports -->
	<script>
	var link = document.createElement( 'link' );
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
	document.getElementsByTagName( 'head' )[0].appendChild( link );
	</script>
	</head>
	<body>
	<div class="reveal">
	<div class="slides">
	<section>Slide 1</section>
	<section>Slide 2</section>
	<section>
	<section>Slide vertical 1</section>
	<section>Slide vertical 2</section>
	<section>Slide vertical 3</section>
	</section>

	<!-- fundos com cores -->
	<section data-background="#ff0000"></section>

	<!-- fundos com imagens -->
	<section data-background="image.png"></section>

	<!-- fundos com imagens em tamanho definido e se repetindo -->
	<section data-background="image.png" data-background-size="100px" data-background-repeat="repeat"></section>

	<!-- vídeos em loop! -->
	<section data-background-video="video" data-background-video-loop></section>

	<!-- um site dentro do próprio slide! -->
	<section data-background-iframe="https://willianjusten.com.br"></section>

	<!-- Essa transição irá ser passada como um zoom. -->
	<section data-transition="zoom">Zoom</section>

	<!-- Escolha a velocidade do slide entre: default, fast or slow! -->
	<section data-transition-speed="fast">Fast</section>

	<!-- Transição padrão de deslizar para o lado. -->
	<section data-transition="slide">Slide</section>

	<!-- Desliza quando entra (slide-in) e esmaece quando sai. (fade-out) -->
	<section data-transition="slide-in fade-out">Esmaece quando sai</section>

	<!-- Esmaece quando entra (fade-in) e desliza quando sai. (slide-out) -->
	<section data-transition="fade-in slide-out">Desliza quando sai</section>

	<section>
	<p class="fragment grow">grow</p>
	<p class="fragment shrink">shrink</p>
	<p class="fragment fade-up">fade-up (also down, left and right!)</p>
	<p class="fragment current-visible">visible only once</p>
	<p class="fragment highlight-current-blue">blue only once</p>
	<p class="fragment highlight-red">highlight-red</p>
	<p class="fragment highlight-green">highlight-green</p>
	<p class="fragment highlight-blue">highlight-blue</p>
	</section>
	<section>
	<span class="fragment fade-in">
	<span class="fragment fade-out">I'll fade in, then out</span>
	</span>
	</section>

	<section>
	<span class="fragment fade-in">I'll fade in, then out[...]</span>
	<span class="fragment fade-in">[...]I'll fade in, then out[...]</span>
	<span class="fragment fade-in">[...]I'll fade in, then out[...]</span>
	</section>

	<section>
	<p class="fragment" data-fragment-index="3">Appears last</p>
	<p class="fragment" data-fragment-index="1">Appears first</p>
	<p class="fragment" data-fragment-index="2">Appears second</p>
	</section>

	<section>
	<pre><code data-trim data-noescape>
	(def lazy-fib
	(concat
	[0 1]
	<mark>((fn rfib [a b]</mark>
	(lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
	</code></pre>
	</section>
	<section>
	<video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
	</section>
	<section>
	<h2>This video will use up the remaining space on the slide</h2>
	<video class="stretch" src="https://www.youtube.com/watch?v=-9_zcFmvbMA"></video>
	</section>


	</div>
	</div>

	<script src="lib/js/head.min.js"></script>
	<script src="js/reveal.js"></script>

	<script>
	// More info https://github.com/hakimel/reveal.js#configuration
	Reveal.initialize({
	history: true,

	// More info https://github.com/hakimel/reveal.js#dependencies
	dependencies: [
	{ src: 'plugin/markdown/marked.js' },
	{ src: 'plugin/markdown/markdown.js' },
	{ src: 'plugin/notes/notes.js', async: true },
	{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
	]
	});

	/*exibe numero na pagina
	Reveal.configure({ slideNumber: true });

	exibe numero na pagina com total
	Reveal.configure({ slideNumber: 'c/t' }); */

	/*para exportar para pdf precisa configurar o tamanho padrão do slide
	Reveal.initialize({
	// The "normal" size of the presentation, aspect ratio will be preserved
	// when the presentation is scaled to fit different resolutions. Can be
	// specified using percentage units.
	width: 960,
	height: 700,

	// Factor of the display size that should remain empty around the content
	margin: 0.1,

	// Bounds for smallest/largest possible scale to apply to content
	minScale: 0.2,
	maxScale: 1.5
	});
	ou
	Reveal.initialize({
	width: "100%",
	height: "100%",
	margin: 0,
	minScale: 1,
	maxScale: 1
	});*/

	</script>
	</body>
	</html>