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>

/* スタイルは自身で制作する必要有り */
%MINIFYHTMLc9a43f592095ec9049e07600b1942f7a7%//オプション一覧
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プラグイン

  • FlexSlider

    FlexSlider

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

  • MOVINGBOXES

    MOVINGBOXES

    ECサイトの商品ディスプレイ向き

  • FOTORAMA

    FOTORAMA

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

  • FullscreenSlitSlider

    FullscreenSlitSlider

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

  • SlidesJS

    SlidesJS

    シンプルなスライダー