Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/fathom.min.js"></script>

/* スタイルは自身で制作する必要有り */
%MINIFYHTMLdfe3b9f2e8abcfd49631381ac81faeb27%//オプション一覧
portable: undefined,
portableTagName: 'div',
portableClass: 'fathom-container',
displayMode: 'single',
slideTagName: 'div',
slideClass: 'slide',
activeClass: 'activeslide',
inactiveClass: 'inactiveslide',
margin: 100,
onScrollInterval: 300,
scrollLength: 600,
easing: 'swing',

timeline: undefined,
video: undefined,

onActivateSlide: undefined,
onDeactivateSlide: undefined
<div id="presentation">
	<div class="slide">
		<p>Slide 1</p>
		<p><img src="<PATH>/img06.jpg" width="95%" alt=""></p>
	</div>
	<div class="slide">
		<p>Slide 2</p>
		<p><img src="<PATH>/img08.jpg" width="95%" alt=""></p>
	</div>
	<div class="slide">
		<p>Slide 3</p>
		<p><img src="<PATH>/img04.jpg" width="95%" alt=""></p>
	</div>
	<div class="slide">
		<p>Slide 4</p>
		<p><img src="<PATH>/img02.jpg" width="95%" alt=""></p>
	</div>
	<div class="slide">
		<p>Slide 5</p>
		<p><img src="<PATH>/img01.jpg" width="95%" alt=""></p>
	</div>
</div>

Fathomについて

Fathomは、プレゼン向きのスライダープラグインです。
設定もシンプルですぐ設置できます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • FOTORAMA

    FOTORAMA

    フルスクリーンの切り替えができたりするスライダー

  • FlexSlider

    FlexSlider

    簡単に多機能なスライダーを設置でき、豊富なオプションを備えている

  • FullscreenSlitSlider

    FullscreenSlitSlider

    様々なエフェクトでスライドを実装できる

  • AwkwardShowcase

    AwkwardShowcase

    シンプルなスライダーからちょっと豪華なスライダーまで幅広く設定可能

  • jcarousel

    jcarousel

    カスタマイズ性のあるカルーセルを設置できる