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

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)任何其他幻灯片(如果存在).