动态地从显示中添加/删除幻灯片.JS

Add/Remove Slides from Reveal.JS dynamically

本文关键字：删除 幻灯片 JS 添加 显示 动态      更新时间：2023-09-26

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

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

删除幻灯片

也是如此，如果您删除".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） 任何其他（如果存在）。

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，其中使用降价插件重新渲染的部分只是使用 Reveal.sync() .

这将为您完成所有班级杂耍，重新计算幻灯片编号等。唯一重要的另一件事是Reveal.slide(0)确保您不在幻灯片 7 张（满分 5 张）:)如果您删除了 2 张幻灯片。

我的解决方法是：

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

    .HTML 

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

    爪哇语

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

  2. 存储此标记，然后将其从 DOM 中删除。

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

  3. 最后，一个新元素被添加到甲板中并包装在空标签中。

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

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

相关文章：