Reveal.js | 初期設定

概要

Reveal.js における、各種属性の初期設定について。

Reveal.jsのhtmlの最下部の、

Reveal.initialize({
// 略
})

に設定を行うことでスライド全体に対する初期設定をします。

サンプルコード

デフォルトの設定を色々と変更してみます。

Reveal.initialize({
	controls: false,                 // 右下のコントロールを非表示
	progress: false,                 // 下部の進捗バーを非表示
	slideNumber: true,               // 右下にスライドのページ番号を表示
	history: true,                   // 各ページをブラウザの履歴に残す
	overview: false,                 // Escで表示できる「概要」ページを表示不可にする
	center: false,                   // スライドの垂直方向中央表示をしない（上寄せになる）
	touch: false,                    // タッチ操作を無効化
	loop: true,                      // スライドをループさせる
	rtl: true,                       // 右から左へのスライド
	fragments: false,                // fragmentsを無効化する
	autoSlide: 1000,                 // 自動スライドをミリ秒単位で設定。デフォルトは0（自動スライドしない）
	autoSlideStoppable: false ,      // 左下の自動スライド停止用のボタンを非表示にする
	mouseWheel: true,                // マウスのホイールによるスライドを可能にする
	transition: 'cube',              // キューブ状の transition でスライドを動作させる
	                                 // 設定値 default/cube/page/concave/zoom/linear/fade/none
	transitionSpeed: 'slow',         // スライド速度を遅く設定。 設定値 default/fast/slow
	// 視差背景の画像URL設定
	parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
	// 視差背景のサイズを設定
	parallaxBackgroundSize: '2100px 1024x',

});

動作確認

参照