multiple-instances.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>reveal.js - Multiple Instances</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7. <link rel="stylesheet" href="../dist/reveal.css">
  8. <link rel="stylesheet" href="../dist/theme/white.css" id="theme">
  9. </head>
  10. <body style="background: #ddd;">
  11. <div style="display: flex; flex-direction: row;">
  12. <div class="reveal deck1" style="width: 100%; height: 50vh; margin: 10px;">
  13. <div class="slides">
  14. <section>Deck 1, Slide 1</section>
  15. <section>Deck 1, Slide 2</section>
  16. </div>
  17. </div>
  18. <div class="reveal deck2" style="width: 100%; height: 50vh; margin: 10px;">
  19. <div class="slides">
  20. <section>Deck 2, Slide 1</section>
  21. <section>Deck 2, Slide 2</section>
  22. </div>
  23. </div>
  24. </div>
  25. <script src="../dist/reveal.min.js"></script>
  26. <script>
  27. let r1 = new Reveal( document.querySelector( '.deck1' ), {
  28. embedded: true,
  29. keyboard: false
  30. } );
  31. r1.initialize();
  32. let r2 = new Reveal( document.querySelector( '.deck2' ), {
  33. embedded: true,
  34. keyboard: false
  35. } );
  36. r2.initialize().then( () => {
  37. r2.slide(1);
  38. } );
  39. </script>
  40. </body>
  41. </html>