JavaScript

Splide.jsを使ってスワイプやタップに対応したスライダーを表示する方法

Splide.jsを使ってスワイプやタップに対応したスライダーを表示する方法をご紹介します。

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>

Splide.jsを使ってスワイプやタップに対応したスライダーを表示する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アナリティクスタグは流用しないで下さい。