Question

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

Answer 1

我对即将到来的项目也感到好奇;环顾四周，找不到任何东西，所以我为自己的项目写了一些东西，最后附上了。在当前幻灯片之后添加幻灯片非常简单。只需将一个section元素附加到'.slides'，并确保该部分具有类'future'。此外，如果您在最后一张幻灯片中，则需要将“启用”类添加到“.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（内容，索引）或Reveal.remove（索引）调用它。

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

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

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

一开始。

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

会将其添加到第3个位置。

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

Answer 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插件重新渲染的appart只使用Reveal.sync()。

这将为你做所有的课堂杂耍，重新计算幻灯片编号等。唯一的另一个重要的事情是Reveal.slide(0)确保你不是在幻灯片7中的5个:)删除了2张幻灯片。

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

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

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

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

动态添加/删除Reveal.JS中的幻灯片

3 个答案: