添加/ Reveal.JS动态删除幻灯片 [英] Add/Remove Slides from Reveal.JS dynamically

问题描述

是否可以添加/而presentation与reveal.js运行删除幻灯片？为了precise，是有这或API也许有些脏的解决方法吗？

Is it possible to add/remove slides while a presentation is running with reveal.js? To be precise, is there an API for that or maybe some dirty workaround?

推荐答案

我很好奇这个问题，以及对即将开展的项目;环顾四周，找不到任何东西，所以我写的东西为我自己的项目，追加在末尾。您当前的幻灯片之后添加幻灯片是pretty的简单。只需添加一个部分元素.slides，并确保该部分有类未来。另外，如果你在最后一张幻灯片，则需要添加已启用，以.navigate右的类。添加一些当前幻灯片之前弄乱的编号，所以你需要带班'过去'添加它，然后移动到下一张幻灯片。

I was curious about this as well for an upcoming project; looked around and couldn't find anything so I wrote something for my own project, appended at the end. Adding a slide after your current slide is pretty straightforward. Just append a section element to '.slides', and make sure the section has class 'future'. Also, if you are on the last slide, you need to add class 'enabled' to '.navigate-right'. Adding something before the current slide messes up the numbering, so you need to add it with class 'past', and then move to the next slide.

同样会去删除某张幻灯片，如果你删除了.past幻灯片，即弄乱你的编号。我没有测试过我的code以及（还），所以如果你把它当作是试验井。

Same would go for removing a slide, if you remove a '.past' slide, that messes up your numbering. I haven't tested my code well (yet), so if you use it as is test well.

        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后添加它（{...}）;

If you want to use this, add it after Reveal.initialize({...});

与Reveal.add（内容索引），或Reveal.remove（指数）来调用它。

Call it with Reveal.add(content,index), or Reveal.remove(index).

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

要补充一点，作为最后一张幻灯片，

would add that as the last slide,

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

在开始。

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

将在第三个位置添加。

would add it in the 3rd location.

Reveal.remove（）删除最后一张幻灯片，Reveal.remove（N）其他（如果存在的话）。

Reveal.remove() removes the last slide, Reveal.remove(n) any other (if it exists).

这篇关于添加/ Reveal.JS动态删除幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！