Splide.jsを使ってスワイプやタップに対応したスライダーを表示する方法をご紹介します。
Contents
Splide.jsを使ってスワイプやタップに対応したスライダーを表示するCSS記述
※splide.min.cssファイルを読み込みます。その他、必要に応じて変更して下さい。
<link rel="stylesheet" href="css/splide.min.css"> <style> body { font-size: 14px; text-align: center; line-height: 2em; } h1{ text-align: center; font-size: 20px; line-height: 2em; padding: 15px 0 30px 0; } </style>
スワイプやタップに対応したスライダーを表示するHTML記述
※スライドエリア(class=”splide”)内に画像(1.jpg~3.jpg)を用意します。
<h1>Splide.jsを使ってスワイプやタップに対応したスライダーを表示</h1> <section class="splide" aria-labelledby="carousel-heading"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"><img src="1.jpg"></li> <li class="splide__slide"><img src="2.jpg"></li> <li class="splide__slide"><img src="3.jpg"></li> </ul> </div> </section>
Splide.jsを使ってスワイプやタップに対応したスライダーを表示するJavaScriptの記述
※splide.min.jsファイルを読み込みます。ページローディング後の処理「document.addEventListener( ‘DOMContentLoaded ~」内にSplide(‘スライドエリアのタグ要素’)を記述します。
<script src="js/splide.min.js"></script> <script> document.addEventListener( 'DOMContentLoaded', function() { var splide = new Splide( '.splide' ); splide.mount(); } ); </script>
Splide.jsを使ってスワイプやタップに対応したスライダーを表示するデモページ
Splide.jsを使ってスワイプやタップに対応したスライダーを表示するデモページ
ソース元:Splide – アクセシビリティに配慮した軽量・高機能スライダー
Splide – アクセシビリティに配慮した軽量・高機能スライダー
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告