javascript - 从 Reveal.JS 动态添加/删除幻灯片

Question

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

score 12 · Accepted Answer

对于即将到来的项目，我也对此感到好奇；环顾四周，找不到任何东西，所以我为自己的项目写了一些东西，并附在最后。在当前幻灯片之后添加幻灯片非常简单。只需将一个部分元素附加到“.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) 删除任何其他幻灯片（如果存在）。

score 2 · Accepted Answer

Reveal.sync()是国王。

您可以动态删除幻灯片。

这是完整的示例：CollaboFramework

这是删除所有幻灯片的示例：

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

这是一个 Markdown 幻灯片，但它与 HTML 类似，在这里您可以创建通用幻灯片

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

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

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

score 0 · Accepted Answer

我的解决方法是：

用空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 );

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

javascript - 从 Reveal.JS 动态添加/删除幻灯片

3 回答 3

Related

Reference