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

1ページで構成された複数のコンテンツをデスクトップのドラッグ、スマフォ・タブレットのスワイプ操作でスライドして表示する単体で動作するスクリプトを紹介します。

サイトのキャプチャ

Minimit Gallery
Minimit Gallery -GitHub

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>

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

top of page

©2017 coliss