add the slides html ,js ,css try to get the presentation ,and add more slides in main page for test

OfficeJS/lib/presentation/slides.css

+html { background-color: black; }
+a { color: #ff0066; } a:hover {text-decoration: underline;}
+footer { position: absolute; bottom: 50px; right: 50px; }
+strong {color: #ff0066}
+body {
+    font-family: 'oswald', arial, serif;
+    background-color: white;
+    color: white;
+    font-size: 2em;
+    background: #1c1c1c;
+    background-image: -moz-radial-gradient(center 45deg, #333 0%, #1c1c1c 50%);
+    background-image: -moz-radial-gradient(center 45deg, #333 0%, #1c1c1c 50%);
+}
+
+
+/* transition effect */
+section {
+    -moz-transition: left 400ms linear 0s;
+    -webkit-transition: left 400ms linear 0s;
+    -o-transition: left 400ms linear 0s;
+    -ms-transition: left 400ms linear 0s;
+    transition: left 400ms linear 0s;
+}
+section { left: -150%; }
+section[aria-selected] { left: 0; }
+section[aria-selected] ~ section { left: +150% }
+
+.chapter { background-color: black;}
+.chapter h1 {line-height: 600px; vertical-align: middle; margin: 0; text-align: center; display: block}
+
+h1 {
+    margin: 50px 100px 0 100px;
+    font-size: 50px;
+    text-shadow: 0px -1px 0px #000;
+    text-align: left;
+}
+h2 {
+    color: #fae50b;
+    margin: 70px 0 0 0;
+    font-size: 40px;
+    text-align: center;
+}
+ul {
+    margin-top: 70px;
+    font-size: 35px;
+    text-align: right;
+    border-right: 4px solid white;
+    padding-right: 40px;
+    min-width: 310px;
+    margin-left: 50px;
+    display: inline-block;
+}
+q, p {
+    margin: 50px auto 0 auto;
+    width: 500px;
+}
+q:after {content: ""}
+q:before {content: ""}
+q {
+    display: block;
+    margin-top: 140px;
+}
+video {
+    position: absolute;
+    top: 210px;
+    width: 260px;
+    left: 445px;
+    box-shadow: 0 0 10px black;
+}
+#arrow {
+    position: absolute;
+    top: 165px;
+    left: 460px;
+    font-size: 100px;
+    color: white;
+
+}
+li {list-style-type: none}
+
+
+
+
+
+
+* { margin: 0; padding: 0; }
+details {display: none;}
+body {
+  width: 800px; height: 600px;
+  margin-left: -400px; margin-top: -300px;
+  position: absolute; top: 50%; left: 50%;
+  overflow: hidden;
+}
+section {
+  position: absolute;
+  pointer-events: none;
+  width: 100%; height: 100%;
+}
+section[aria-selected] { pointer-events: auto;}
+body {display: none}
+body.loaded {display: block}
+
+
+section.code pre { margin: 20px 0 0 40px;font-size: 15px; font-weight: bold;}
+section.code .Constant { color: #af5fff}
+section.code .StorageClass { color: #ff8700}
+section.code .Exception { color: #87ff00}
+section.code .Identifier { color: #ff8700}
+section.code .Title { color: #d75f00}
+section.code .String { color: #afaf87}
+section.code .Type { color: #5fd7ff}
+section.code .Statement { color: #d7005f}
+section.code .Function { color: #87ff00}
+section.code .Comment { color: #CCC}
+
+/* Cedric extensions */
+section img {max-width: 100%; max-height: 80%; display: block; margin-left: auto; margin-right: auto;}

OfficeJS/lib/presentation/slides.js

+var friendWindows = [];
+var idx = 1;
+var slides;
+
+/* main() */
+
+window.onload = function() {
+  slides = document.querySelectorAll("body > section");
+  onhashchange();
+  setSlide();
+  document.body.className = "loaded";
+  onresize();
+}
+
+/* Handle keys */
+
+window.onkeydown = function(e) {
+  // Don't intercept keyboard shortcuts
+  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+    return;
+  }
+  if ( e.keyCode == 37 // left arrow
+    || e.keyCode == 33 // page up
+  ) {
+    e.preventDefault();
+    back();
+  }
+  if ( e.keyCode == 39 // right arrow
+    || e.keyCode == 34 // page down
+  ) {
+    e.preventDefault();
+    forward();
+  }
+
+  if ( e.keyCode == 32) { // space
+      e.preventDefault();
+      toggleContent();
+  }
+}
+
+/* Adapt the size of the slides to the window */
+
+window.onresize = function() {
+  var sx = document.body.clientWidth / window.innerWidth;
+  var sy = document.body.clientHeight / window.innerHeight;
+  var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
+  document.body.style.MozTransform = transform;
+  document.body.style.WebkitTransform = transform;
+  document.body.style.OTransform = transform;
+  document.body.style.msTransform = transform;
+  document.body.style.transform = transform;
+}
+function getDetails(idx) {
+  var s = document.querySelector("section:nth-of-type("+ idx +")");
+  var d = s.querySelector("details");
+  return d?d.innerHTML:"";
+}
+window.onmessage = function(e) {
+  msg = e.data;
+  win = e.source;
+  if (msg === "register") {
+    friendWindows.push(win);
+    win.postMessage(JSON.stringify({method: "registered", title: document.title, count: slides.length}), document.location);
+    win.postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), document.location);
+    return;
+  }
+  if (msg === "back") back();
+  if (msg === "forward") forward();
+  if (msg === "toggleContent") toggleContent();
+  // setSlide(42)
+  var r = /setSlide\((\d+)\)/.exec(msg);
+  if (r) {
+      idx = r[1];
+      setSlide();
+  }
+}
+
+/* If a Video is present in this new slide, play it.
+    If a Video is present in the previous slide, stop it. */
+
+function toggleContent() {
+  var s = document.querySelector("section[aria-selected]");
+  if (s) {
+      var video = s.querySelector("video");
+      if (video) {
+          if (video.ended || video.paused) {
+              video.play();
+          } else {
+              video.pause();
+          }
+      }
+  }
+}
+
+/* If the user change the slide number in the URL bar, jump
+    to this slide. */
+
+window.onhashchange = function(e) {
+  var newidx = ~~window.location.hash.split("#")[1];
+  if (!newidx) newidx = 1;
+  if (newidx == idx) return;
+  idx = newidx;
+  setSlide();
+}
+
+/* Slide controls */
+
+function back() {
+  if (idx == 1) return;
+  idx--;
+  setSlide();
+}
+function forward() {
+  if (idx >= slides.length) return;
+  idx++;
+  setSlide();
+}
+function setSlide() {
+  var old = document.querySelector("section[aria-selected]");
+  var next = document.querySelector("section:nth-of-type("+ idx +")");
+  if (old) {
+    old.removeAttribute("aria-selected");
+    var video = old.querySelector("video");
+    if (video) { video.pause(); }
+  }
+  if (next) {
+    next.setAttribute("aria-selected", "true");
+    var video = next.querySelector("video");
+    if (video) { video.play(); }
+  } else {
+    console.warn("No such slide: " + idx);
+    idx = 0;
+    for (var i = 0; i < slides.length; i++) {
+        if (slides[i].hasAttribute("aria-selected")) {
+            idx = i + 1;
+        }
+    }
+  }
+  window.location.hash = idx;
+  for (var i = 0; i < friendWindows.length; i++) {
+      friendWindows[i].postMessage(JSON.stringify({method: "newslide", details: getDetails(idx), idx: idx}), document.location);
+  }
+}
+