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

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

Contents

Splide.jsを使ってスワイプやタップに対応したスライダーを表示するCSS記述
スワイプやタップに対応したスライダーを表示するHTML記述
Splide.jsを使ってスワイプやタップに対応したスライダーを表示するJavaScriptの記述
Splide.jsを使ってスワイプやタップに対応したスライダーを表示するデモページ
ソース元：Splide - アクセシビリティに配慮した軽量・高機能スライダー

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>