Glide.jsでスライドショーを作る

Glide.jsとは

無料で使用できるオープンソースプロジェクトです。
他のライブラリに依存することなく、軽量なことが特徴です。

インストール

npm

npm install @glidejs/glide

GitHub

読み込み

以下の二つをHTMLで読み込みます。

<link rel="stylesheet" href="./@glidejs/glide/dist/css/glide.core.min.css">

<script src="./@glidejs/glide/dist/glide.min.js"></script>

スライドショーを配置する位置へ以下を記入します。

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">画像１</li>
      <li class="glide__slide">画像２</li>
      <li class="glide__slide">画像３</li>
    </ul>
  </div>
</div>

以下を記入し、初期化します。

<script>
    new Glide('.glide', {
      autoplay: 2000
    }).mount()
</script>

autoplayは指定の時間で自動変更してくれます。上の例では2秒で移ります。

サンプル

---

Glide.jsのサイトのDOCSからその他様々な仕様を見ることができます