使用 WebSlides 创建网页幻灯片的体验

有创建网页幻灯片的需要,正好看到 WebSlides,所以试用。幻灯的内容不过是每页塞一张图片,应用没有什么变化,结果在这里。决定试用 WebSlides 的最大加分项是点击页面上显示「页数」的位置可以显示索引视图,对图片较多的幻灯片视觉效果很好。

log-webslides

代码的部分很简单,引用 css、js 文件,然后按照结构在 html 里填空

<article id="webslides">
  <section>
    <!-- Slide 1 -->
  </section>
  <section>
    <!-- Slide 2 -->
  </section>
</article>

缺点有二:

  1. 文档给人感觉很凌乱。官网侧重用实例说明,另有部分内容在 GitHub Wiki
  2. 移动浏览器支持有问题。页数和翻页链接在移动浏览器上不显示,需要启用 changeOnClick 选项才能翻页,而且也打不开酷炫的索引视图了。

所以初步的结论,还是 reveal.js 更好用一些。