Adding / removing slides from Reveal.JS dynamically

Question

Can I add / remove slides while a presentation is running using show.js? To be precise, is there an API for this, or maybe some kind of dirty workaround?

Answer 1

I was also interested to know about the upcoming project; looked around and could not find anything, so I wrote something for my own project, added at the end. Adding a slide after the current slide is pretty simple. Just add a section element to .llides and make sure that there is a future class in the section. Also, if you are on the last slide, you need to add the "enabled" class to ".navigate-right". Adding something before the current slide interferes with the numbering, so you need to add it using the "past" class, and then move on to the next slide.

The same goes for deleting a slide if you delete the slide ".past" that messed up your numbering. I have not tested my code very well (yet), so if you use it as a test it is good.

Reveal.addEventListener( 'ready', function( event ) { Reveal.add = function( content = '',index = -1 ){ dom = {}, dom.slides = document.querySelector( '.reveal .slides' ); var newSlide = document.createElement( 'section' ); if( index === -1 ) { //adding slide to end newSlide.classList.add( 'future' ); dom.slides.appendChild(newSlide); document.querySelector( '.navigate-right' ).classList.add( 'enabled' ); //just enable it, even if it is } else if( index > Reveal.getIndices().h ) { newSlide.classList.add( 'future' ); dom.slides.insertBefore(newSlide,dom.slides.querySelectorAll('section:nth-child('+(index+1)+')')[0]); } else if( index <= Reveal.getIndices().h ) { newSlide.classList.add( 'past' ); dom.slides.insertBefore(newSlide,dom.slides.querySelectorAll('section:nth-child('+(index+1)+')')[0]); Reveal.next(); } newSlide.innerHTML = content; }; Reveal.remove = function( index = -1 ){ dom = {}, dom.wrapper = document.querySelector( '.reveal' ); dom.slides = document.querySelector( '.reveal .slides' ); var target = (dom.wrapper.querySelectorAll('.slides > section:nth-child('+(index+1)+')')[0]) ? dom.wrapper.querySelectorAll('.slides > section:nth-child('+(index+1)+')')[0] : false; if( index === -1 ) { if (Reveal.isLastSlide()) Reveal.prev(); dom.slides.removeChild(dom.wrapper.querySelectorAll('.slides > section')[dom.wrapper.querySelectorAll('.slides > section').length-1]); if (Reveal.isLastSlide()) document.querySelector( '.navigate-right' ).classList.remove( 'enabled' ); } else if( index > Reveal.getIndices().h && target ) { dom.slides.removeChild(target); if (Reveal.getIndices().h == dom.wrapper.querySelectorAll('.slides > section').length-1) document.querySelector( '.navigate-right' ).classList.remove( 'enabled' ); } else if( index < Reveal.getIndices().h && target ) { dom.slides.removeChild(target); location.hash = '/'+parseInt(Reveal.getIndices().h-1); } else if( index == Reveal.getIndices().h && target ) { if (index == 0) { Reveal.next(); document.querySelector( '.navigate-left' ).classList.remove( 'enabled' ); } else Reveal.prev(); dom.slides.removeChild(target); if( dom.wrapper.querySelectorAll('.slides > section').length == index) document.querySelector( '.navigate-right' ).classList.remove( 'enabled' ); } }; } ); 

If you want to use this, add it after Reveal.initialize ({...});

Name it using Reveal.add (content, index) or Reveal.remove (index).

 Reveal.add('<h3>Slide title</h3>') 

will add that as the last slide

 Reveal.add('<h3>Slide title</h3>',0) 

at the beginning.

 Reveal.add('<h3>Slide title</h3>',3) 

will add it to the third position.

Reveal.remove () deletes the last slide, Reveal.remove (n) any other (if it exists).

Answer 2

Reveal.sync() is king.

You can dynamically delete slides.

Here is a complete example: CollaboFramework

The following is an example of deleting all slides :

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

Here is an example of adding a new slide

 // slide 1 var section = $("<section></section>"); slides.append(section); section.attr('data-markdown', ''); var script = $("<script></script>"); section.append(script); script.attr('type', 'text/template'); var slideContent = "and here is the image\r\n" + "<img src='https://cdn.psychologytoday.com/sites/default/files/field_blog_entry_images/flower-887443_960_720.jpg' width='200px' height='200px'>\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); 

This is a Markdown slide, but it is similar to HTML, and here you are creating a common slide

Of course, in the real github code you will see that it makes sense to provide some delay in order for the tags to wait to create them before completing the completion of the task (with a callback).

Finally, you need update Reveal , in which the rerendering application with the plugin for markup just uses Reveal.sync() .

This will do all the class juggling for you, recounting slide numbers, etc. The only important thing is to do Reveal.slide(0) to make sure that you are not on slide 7 out of 5 :) if you delete 2 slides.

Answer 3

My workaround for this was:

• Initialize expand with empty section tag.

  HTML

   <div class="reveal"> <div class="slides"> <section>Single Horizontal Slide</section> <section id="blank"></section><!-- Blank slug --> </div> </div> 

  Javascript

   Reveal.initialize(); //slide deck wrapper deck = $('#blank').parent(); 

• Save this tag and remove it from the DOM.

   // a blank is initialized and stored as a variable wrap = $('#blank').clone() .attr('id',null) .prop('outerHTML'); // remove the blank $('#blank').remove(); 

• Finally, a new item is added to the deck and verified with an empty tag.

    $('<h1>Slide added</h1>').appendTo(deck) .wrap( wrap ); 

Here is a demon. I have not tried this technique with any complex configurations, but for a simple presentation it is enough.