问题描述
是否可以添加/而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动态删除幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！