Glide.jsプラグインを使ってスライダー表示｜DAD UNION

Glide.jsプラグインを使ってスライダー表示する方法をご紹介します。
スライダー系プラグインって色んな種類のプラグインが多々ありますね。

Contents

Glide.jsプラグインを使ってスライダー表示するCSS記述
Glide.jsプラグインを使ってスライダー表示するHTML記述
Glide.jsプラグインを使ってスライダー表示するJavaScriptの記述
Glide.jsプラグインを使ったスライダー表示デモページ
ソース元：Glide.js | A dependency-free JavaScript ES6 slider and carousel

Glide.jsプラグインを使ってスライダー表示するCSS記述

※glide.cssファイルを読み込みます。その他、必要に応じて変更して下さい。

<link rel="stylesheet" href="glide.css">
<style>
body {
  background: #000000;
  font-size: 16px;
  color: #ffffff;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
  position: relative;
}
</style>

Glide.jsプラグインを使ってスライダー表示するHTML記述

※スライドエリア全体（id=”intro”）内にスライドエリア（data-glide-el=”track”）、左右矢印（data-glide-el=”controls”）、コントロールボタン（data-glide-el=”controls[nav]”）エリアを用意します。必要に応じて変更して下さい。

<h1>Glide.jsプラグインを使ったスライダー表示</h1>

<div id="intro" class="slider glide">

  <div class="slider__track glide__track" data-glide-el="track">
    <ul class="slider__slides glide__slides">
        <li class="slider__frame glide__slide">0</li>
        <li class="slider__frame glide__slide">1</li>
        <li class="slider__frame glide__slide">2</li>
        <li class="slider__frame glide__slide">3</li>
        <li class="slider__frame glide__slide">4</li>
        <li class="slider__frame glide__slide">5</li>
        <li class="slider__frame glide__slide">6</li>
        <li class="slider__frame glide__slide">7</li>
        <li class="slider__frame glide__slide">8</li>
        <li class="slider__frame glide__slide">9</li>
    </ul>
  </div>

  <div data-glide-el="controls">
    <button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="<">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
        <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"/>
      </svg>
    </button>

    <button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir=">">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
        <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"/>
      </svg>
    </button>
  </div>

  <div class="slider__bullets glide__bullets" data-glide-el="controls[nav]">
      <button class="slider__bullet glide__bullet" data-glide-dir="=0"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=1"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=2"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=3"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=4"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=5"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=6"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=7"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=8"></button>
      <button class="slider__bullet glide__bullet" data-glide-dir="=9"></button>
  </div>

</div>

Glide.jsプラグインを使ってスライダー表示するJavaScriptの記述

※CDNのglide.jsファイル（ https://unpkg.com/@glidejs/glide ）を読み込みます。new Glide(‘#intro’, {オプション})を記述します。オプションにはスライド数、フォーカス位置、ブレイクポイント等を設定します。

<script src="https://unpkg.com/@glidejs/glide"></script>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
  var glide = new Glide('#intro', {
      type: 'carousel',
      perView: 4,
      focusAt: 'center',
      breakpoints: {
        800: {
          perView: 2
        },
        480: {
          perView: 1
        }
      }
  })

  glide.mount();
})
</script>