縦長HTML文書を「スライドブロック」単位で扱い、発表向けナビゲーションを提供する軽量ライブラリ。依存なし、単一ファイル (slideblock.js)。
詳細仕様は spec.md 参照。
すぐ試したいだけなら、ダウンロードせず以下をそのまま <script src> に指定してもよい（GitHub Pagesで公開中）。ただし将来の更新で挙動が変わる可能性があるため、資料として残す場合は slideblock.js をダウンロードして同梱することを推奨する。
<script src="https://cympfh.cc/SlideBlockJS/slideblock.js"></script>
<section class="slide-block" id="..."> で囲むslideblock.js を <body> 最下部で読み込む<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>My Slides</title>
</head>
<body>
<section id="intro" class="slide-block">
<h1>はじめに</h1>
<p>このライブラリの概要</p>
</section>
<section id="feature" class="slide-block">
<h1>機能</h1>
<ul>
<li>スクロールスナップ</li>
<li>キーボードナビゲーション</li>
<li>自動目次生成</li>
</ul>
</section>
<script src="slideblock.js"></script>
</body>
</html>
→/↓ で次のブロック、←/↑ で前のブロック.current クラスを自動付与☰ ボタンで開閉できる。邪魔なときは閉じておける// 自動初期化（script読み込み時に実行される）
SlideBlockJS.init();
// 手動初期化（オプション指定、再初期化も可能）
SlideBlockJS.init({
container: document.body, // ブロックを探すルート要素
snap: true, // スクロールスナップ有効/無効
keyboard: true, // キーボード操作有効/無効
toc: true // 目次自動生成有効/無効
});
#toc を持つ要素をあらかじめHTMLに用意しておくと、その要素に目次を生成する。無ければ自動生成して <body> に追加する。
MIT