スマホやタブレットの操作にも対応したスライダースクリプト「Glide.js」

スマホやタブレットの操作にも対応したスライダースクリプト「Glide.js」

スマホやタブレットの操作にも対応したスライダースクリプト「Glide.js」

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

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

Glide.jsの使い方

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

Glide.jsのダウンロード

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

  • glide.core.min.css
  • glide.theme.min.css
  • glide.min.js

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


<link rel="stylesheet" href="css/glide.core.min.css">
<link rel="stylesheet" href="css/glide.theme.min.css">
<script src="js/glide.min.js"></script>

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

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


<div class="glide">
  <div data-glide-el="track" class="glide__track">
    <ul class="glide__slides">
      <li class="glide__slide"></li>
      <li class="glide__slide"></li>
      <li class="glide__slide"></li>
    </ul>
  </div>
</div>

各アイテムをリストで記述し、glideというクラスを付けたdivで内包します。「data-glide-el=”track”」もお忘れなく。

5. Glide.jsを実行します。


<script>
  new Glide('.glide').mount()
</script>

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

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

あとがき

jQueryにも依存せず、軽量で使いやすスライダーですね。参考になれば幸いです。

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

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です