从 Reveal.JS 动态添加/删除幻灯片答案

【问题标题】：Add/Remove Slides from Reveal.JS dynamically从 Reveal.JS 动态添加/删除幻灯片
【发布时间】：2013-10-22 15:49:34
【问题描述】：

是否可以在使用reveal.js 运行演示文稿时添加/删除幻灯片？准确地说，是否有用于此的 API 或者可能是一些肮脏的解决方法？

【问题讨论】：

标签： javascript ajax reveal.js

【解决方案1】：

我也对即将到来的项目感到好奇；环顾四周，找不到任何东西，所以我为自己的项目写了一些东西，并附在最后。在当前幻灯片之后添加幻灯片非常简单。只需将一个部分元素附加到“.slides”，并确保该部分具有“未来”类。此外，如果您在最后一张幻灯片上，则需要将“启用”类添加到“.navigate-right”。在当前幻灯片之前添加一些东西会弄乱编号，因此您需要使用“过去”类添加它，然后移至下一张幻灯片。

删除幻灯片也是如此，如果您删除“.past”幻灯片，则会弄乱您的编号。我还没有很好地测试我的代码（还），所以如果你按原样使用它，那就好好测试一下。

        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' );
                }
            };
        } );

如果你想使用这个，在 Reveal.initialize({...}); 之后添加它

使用 Reveal.add(content,index) 或 Reveal.remove(index) 调用它。

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

将其添加为最后一张幻灯片，

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

在开头。

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

将其添加到第三个位置。

Reveal.remove() 删除最后一张幻灯片，Reveal.remove(n) 删除任何其他（如果存在）。

【讨论】：

这个插件的背景你有运气吗？
我一直在努力让这段代码正常工作。对我来说有很多小事情需要调整，但最大的是在每个函数的末尾添加this.sync();。这已经让reveal.js 更新了所有的内部结构，包括背景等等。
我刚刚创建（仍在开发和测试）一个使用上述方法扩展reveal.js 的库：reveal-add-remove.js。谢谢@Mason。
@Michael 我希望你能尽快完成这篇文章，因为它太棒了，正是我想要的。

【解决方案2】：

Reveal.sync()才是王道。

您可以动态删除幻灯片。

这里是完整的例子：CollaboFramework

以下是 removing all slides 的示例：

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

这是 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);

这是一个 Markdown 幻灯片，但它与 HTML 类似，这里有generic slide creation

当然，在真正的 github 代码中，您会发现在确认任务完成之前提供一些延迟以等待标签创建是有意义的（带有回调）。

最后，你需要update Reveal，使用markdown插件重新渲染的部分只是使用Reveal.sync()。

这将为您完成所有班级杂耍，重新计算幻灯片编号等。唯一重要的事情是执行Reveal.slide(0) 以确保您不在幻灯片 5 中的第 7 张 :) 在您删除 2 的情况下幻灯片。

【讨论】：

【解决方案3】：

我的解决方法是：

使用空的section 标记初始化显示。

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();

存储此标签，然后将其从 DOM 中删除。

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

最后一个新元素被添加到deck并包裹在空标签中。

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

这是demo。我没有用任何复杂的配置尝试过这种技术，但是对于一个简单的演示来说这已经足够了。

【讨论】：