Add/Remove Slides from Reveal.JS dynamically

Question

Is it possible to add/remove slides while a presentation is running with reveal.js? To be precise, is there an API for that or maybe some dirty workaround?

Answer 1

Reveal.sync() is the king.

You can dynamically remove slides.

Here is the full example: CollaboFramework

Here is an example of removing all slides:

  var presentation = $('#presentation');
  var slides = $('#presentation .slides');
  slides.empty();

Here is an example of adding a new slide

// slide 1
  var section = $("
");
  slides.append(section);
  section.attr('data-markdown', '');

  var script = $("");
  section.append(script);
  script.attr('type', 'text/template');

  var slideContent =
  "and here is the image\r\n" +
  "\r\n" +
  "and here is the list\r\n" +
  "+ hopa\r\n" +
  "+ cupa\r\n" +
  "+ and some intended links\r\n" +
  " + [CS link](http://www.CollaboScience.com)\r\n" +
  " + [CA link](http://www.CollaboArte.com)\r\n" +
  " + [CF link](https://github.com/Cha-OS/KnAllEdge/)\r\n";

  script.html(slideContent);

It is a Markdown slide, but it is similar for HTML, and here you have generic slide creation

Of course, at the real github code you will see that it makes sense to provide some delay to wait tags to get created before confirming task finished (with callback).

Finally, you need to update Reveal, which appart of rerendering with markdown plugin is just using Reveal.sync().

This will do all class juggling for you, recounting slide numbers, etc. The only other important thing is to do Reveal.slide(0) to be sure that you are not at slide 7 out of 5 :) in the case you removed 2 slides.