[JS]複数のコンテンツをドラッグ・スワイプでスライド表示するスクリプト -Minimit Gallery

サイト構築 -JavaScript

Post on:2013年7月4日

Minimit Galleryのデモ

Minimit Galleryは一つのHTMLファイル内に配置した複数のコンテンツをスライドで次々に表示するスクリプトで、各コンテンツはハッシュリンクでの表示にも対応しています。

デモはIE7+, Firefox 3.5+, Safari 3+, Opera 9+, Chrome, iPhone, iPad, Android, Windows Phoneなどでご覧ください。

デスクトップでデモを表示してみます。

Minimit gallery 2.0 guide

デスクトップではドラッグでコンテンツがスライドできます。

次コンテンツへスライド中

上部のナビゲーションでもコントロールできます。
スマフォ・タブレットなどで表示した際は、スワイプで同様にスライドできます。

Minimit Galleryの使い方

Step 1: HTML

各コンテンツはidを付与したdiv要素などで並列に配置します。

<div id="reference-item-0">コンテンツ 0</div>
<div id="reference-item-1">コンテンツ 1</div>
<div id="reference-item-2">コンテンツ 2</div>
<div id="reference-item-3">コンテンツ 3</div>
<div id="reference-item-4">コンテンツ 4</div>
<div id="reference-item-5">コンテンツ 5</div>

Step 2: 外部ファイル

</body>の上あたりに当スクリプトを外部ファイルとして記述します。

<body>
  ...
  <script src="mg.min.js" type="text/javascript"></script>
</body>

Step 3: JavaScript

あとは、スクリプトを実行するだけです。

<script type="text/javascript">
var mgObject = new Mg({
    reference:"reference",
    click:{
        activated:[0],
        cycle:true,
        interactive:true,
        maxActivated:1,
        auto:1000, autoSlow:5000
    }
});
</script>

カスタマイズも豊富に用意されており、表示コンテンツのコントロール、アニメーション、操作方法などが設定できます。
詳しくは下記ページをご覧ください。