動態添加/刪除Reveal.JS中的幻燈片

Question

演示文稿運行時使用reveal.js可以添加/刪除幻燈片嗎？確切地說，有沒有一個API或者一些骯髒的解決方法？

Answer 1

我很好奇這個以及即將到來的項目;環顧四周，找不到任何東西，所以我爲自己的項目寫了一些東西，最後附上了。在當前幻燈片後添加幻燈片非常簡單。只需在「.slides」中添加一個節元素，並確保該節具有「未來」類。另外，如果您在上一張幻燈片中，則需要將'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) 

會將它添加到第3個位置。

Reveal.remove（）刪除最後一張幻燈片，Reveal.remove（n）任何其他（如果存在）。

Answer 2

我對這個解決方法是：

1. 初始化與空section標籤顯示。

   HTML

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

   的Javascript

   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); 
   

這裏是一個demo。我沒有嘗試過這種技術，但是對於簡單的演示就足夠了。

Answer 3

Reveal.sync()是國王。

您可以動態刪除幻燈片。

以下是完整的例子：CollaboFramework

以下爲removing all slides一個例子：

var presentation = $('#presentation'); 
    var slides = $('#presentation .slides'); 
    slides.empty(); 

以下爲adding a new slide

// 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); 

一個例子，是一個減價幻燈片，但它是類似的HTML，並且在這裏你有generic slide creation

當然，在真實的github代碼中，你會看到在確認任務完成之前（回調）提供一些延遲來等待標籤被創建是有意義的。

最後，你需要update Reveal，這與markdown插件重新渲染的appart只是使用Reveal.sync()。

這將爲你做所有的課程，講述幻燈片編號等。唯一其他重要的事情是做Reveal.slide(0)以確保你不在第7張幻燈片中:)如果你刪除了2張幻燈片。