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>

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

  • AwkwardShowcase

    AwkwardShowcase

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

  • Swipebox

    Swipebox

    スマホのスワイプに対応した全画面スライダー

  • jcarousel

    jcarousel

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

  • MOVINGBOXES

    MOVINGBOXES

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

  • SlidesJS

    SlidesJS

    シンプルなスライダー