multiple-presentations.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>reveal.js - Multiple Presentations</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.es5.js"></script>
  26. <script>
  27. let r1 = new Reveal( document.querySelector( '.deck1' ), {
  28. embedded: true,
  29. keyboard: false
  30. } );
  31. r1.on( 'slidechanged', () => {
  32. console.log( 'Deck 1 slide changed' );
  33. } );
  34. r1.initialize();
  35. let r2 = new Reveal( document.querySelector( '.deck2' ), {
  36. embedded: true,
  37. keyboard: false
  38. } );
  39. r2.initialize().then( () => {
  40. r2.slide(1);
  41. } );
  42. r2.on( 'slidechanged', () => {
  43. console.log( 'Deck 2 slide changed' );
  44. } );
  45. </script>
  46. </body>
  47. </html>