Javascript 从leaver.JS动态添加/删除幻灯片

演示文稿运行时是否可以添加/删除幻灯片？确切地说，是否有一个API，或者是一些肮脏的解决方法？

对于即将到来的项目，我也很好奇这一点；环顾四周，什么也找不到，所以我为自己的项目写了一些东西，附在最后。在当前幻灯片之后添加幻灯片非常简单。只需在“.slides”中附加一个section元素，并确保该section具有类“future”。此外，如果您在最后一张幻灯片上，则需要将类“enabled”添加到“.向右导航”。在当前幻灯片之前添加内容会弄乱编号，因此您需要将其添加到类“过去”，然后移动到下一张幻灯片

如果您删除“.pass”幻灯片，删除幻灯片也会出现同样的情况，这会弄乱您的编号。我还没有很好地测试过我的代码，所以如果您按原样使用它，就可以很好地进行测试

        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.addEventListener（'ready'，函数（事件）{
discover.add=函数（内容=''，索引=-1）{
dom={}，
dom.slides=document.querySelector（'.reveal.slides'）；
var newSlide=document.createElement（'section'）；
如果（索引==-1）{//将幻灯片添加到结尾
newSlide.classList.add（'future'）；
dom.slides.appendChild（newSlide）；
document.querySelector（'.navigate right'）.classList.add（'enabled'）；//只需启用它，即使它是
}else if（index>leave.getindex（）.h）{
newSlide.classList.add（'future'）；
dom.slides.insertBefore（newSlide、dom.slides.querySelectorAll（'section:nth child（+（index+1）+'））[0]）；
}else if（index-leaver.getindexes（）.h&&target）{
dom.slides.removeChild（目标）；
if（leave.getIndexes（）.h==dom.wrapper.querySelectorAll（'.slides>section'）.length-1）document.querySelector（'.navigate right'）.classList.remove（'enabled'）；
}else if（索引section'）.length==index）document.querySelector（'.navigate right'）.classList.remove（'enabled'）；
}
};
} );

如果您想使用它，请将其添加到Reveal.initialize（{…}）之后

用leaver.add（内容、索引）或leaver.remove（索引）来称呼它

discover.add（'Slide title'））

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

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

discover.add（'Slide title'，0）

一开始

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

discover.add（'Slide title'，3）

将其添加到第三个位置

---

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

我的解决方法是：

使用空的

部分

标记初始化分隔缝

HTML

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

存储此标记，然后将其从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 );

$（'Slide added'）。附录（deck）
.包裹（包裹）；

这是一本书。我没有在任何复杂的配置中尝试过这种技术，但对于一个简单的演示来说，这就足够了。

Reveal.sync（）

是王者

您可以动态删除幻灯片

以下是完整的示例：

下面是的一个示例：

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

下面是一个

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

//幻灯片1
变量节=$（“”）；
幻灯片。附加（部分）；
第.attr节（“数据降价”）；
变量脚本=$（“”）；
附加部分（脚本）；
script.attr（'type'，'text/template'）；
滑动内容=
“这是图像\r\n”+
“\r\n”+
“这是列表\r\n”+
“+hopa\r\n”+
“+cupa\r\n”+
“+和一些预期的链接\r\n”+
“+[CS链接](http://www.CollaboScience.com)\r\n“+
“+[CA链接](http://www.CollaboArte.com)\r\n“+
“+[CF链接](https://github.com/Cha-OS/KnAllEdge/)\r\n“；
html（slideContent）；

这是一个降价幻灯片，但它类似于HTML，这里有

当然，在真正的github代码中，您将看到，在确认任务完成（使用回调）之前提供一些延迟来等待标记的创建是有意义的

最后，您需要，使用markdown插件重新招标的一种方式就是使用

Reveal.sync（）

---

这将为您完成所有的课堂杂耍，重新计算幻灯片编号等。唯一其他重要的事情是

显示。幻灯片（0）

确保您没有在5张幻灯片中的第7张：）中，以防您删除了2张幻灯片。

您是否有幸了解此附加组件的背景？我一直在努力使此代码正常工作。对我来说有很多小东西需要调整，但最大的是添加

this.sync（）到每个函数的末尾。这让reveal.js更新了所有的内部内容，包括背景等。我刚刚创建了一个库（仍在开发和测试），它使用上述方法扩展了reveal.js:。谢谢@Mason@Michael我希望你能很快完成，因为它太棒了，正是我所期待的。
  var presentation = $('#presentation');
  var slides = $('#presentation .slides');
  slides.empty();

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