Glide.jsプラグインを使ってスライダー表示する方法をご紹介します。
スライダー系プラグインって色んな種類のプラグインが多々ありますね。
Contents
ディスプレイ広告
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>
Glide.jsプラグインを使ったスライダー表示デモページ
ソース元:Glide.js | A dependency-free JavaScript ES6 slider and carousel
Glide.js | A dependency-free JavaScript ES6 slider and carousel
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。