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

Question

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

Answer 1

我对即将到来的项目也很好奇；环顾四周，找不到任何东西，所以我为自己的项目写了一些东西，附在最后。在当前幻灯片之后添加一张幻灯片非常简单。只需将一个部分元素附加到“.slides”，并确保该部分具有类“future”。此外，如果您在最后一张幻灯片上，则需要将类“enabled”添加到“.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) 任何其他幻灯片(如果存在)。