スマホやタブレットの操作にも対応したjQueryスライドショー「Glide.js」

スマホやタブレットの操作にも対応したjQueryスライドショー「Glide.js」

スマホやタブレットの操作にも対応したjQueryスライドショー「Glide.js」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

Glide.jsは、スマホやタブレットなどモバイルのスワイプ操作にも対応したjQueryスライドショーです。デモはコチラ

デモページは、オートプレイがオフになっているので、矢印をクリックしたりキーボードの矢印キーで操作してみてください。モバイルならスワイプでも動作します。

スポンサードリンク

Glide.jsの使い方

1. まずは、GitHubからGlide.jsをダウンロードします。[Download ZIP]をクリックすると、ZIPファイルがダウンロードされます。

Glide.jsのダウンロード

2. ダウンロードしたZIPファイルを解凍して、以下のファイルをサーバーに設置します。

  • dist/jquery.glide.min.js
  • dist/css/style.css

3. jQueryと設置したファイルをロードします。

index.html
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<link rel="stylesheet" href="css/style.css" />

ファイルパスは、適宜変更してください。

4. スライド用のアイテムをマークアップします。

index.html
<div class="slider">
<ul class="slides">
<li class="slide"><img src="images/slide1.png"></li>
<li class="slide"><img src="images/slide2.png"></li>
<li class="slide"><img src="images/slide3.png"></li>
<li class="slide"><img src="images/slide4.png"></li>
<li class="slide"><img src="images/slide5.png"></li>
</ul>
</div>

各アイテムをリストで記述し、sliderというクラスを付けたdivで内包します。

5. Glide.jsを呼び出します。

index.html
<script type="text/javascript">
$('.slider').glide();
</script>

これでスライドショーの設置完了です。

PCだとクリックだけでなくキーボードでも操作できますし、モバイルだとスワイプでも動きます。

オプションの設定

Glide.jsには、オプションも用意されていて、オートプレイやナビゲーションの有無などを設定をすることができます。

オプション
<script>
$('.slider').glide({
autoplay: 5000,
hoverpause: false,
navigation: false
});
</script>

詳しくは、GitHubに掲載されているので、ご参照ください。

あとがき

非常に軽量で使いやすいスライドショーですね。

ちなみに、古いブラウザでも動くように設計されているようです。IE7で確認したら、ちゃんと動作しました。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。