Vanilla JSでスライダーの実装ができる「Splide.js」

js

今回はjQueryを使用せず、超簡単にスライダーが実装できる「Slide.js」を紹介します〜

・導入方法

土運輸方法ですが、簡単に分けて以下の2つです。

ダウンロード

こちらからダウンロードし、フォルダ内のパスを指定して使用します。

CDN

2つ目はCDNで使用する方法です。こっちの方が楽ですね。

以下の文章をコード内に挿入しますると使用できるようになります〜

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css"> 
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script> 

これで準備は終了です!

・実際に使用してみる

準備ができたら実際に使ってみましょう。

基本となるHTML構造は以下の通りです。

<div class="splide">
  <div class="splide__track"> 
    <ul class="splide__list"> 
      <li class="splide__slide">Slide 01</li> 
      <li class="splide__slide">Slide 02</li> 
      <li class="splide__slide">Slide 03</li> 
    </ul> 
  </div> 
</div>

上記の【 <li class="splide__slide">Slide 01</li> 】の中にスライドさせたい要素を入れていきます。

次にJavaScriptです。基本的には、

document.addEventListener('DOMContentLoaded', () => {
  new Splide( '.splide', { 
    type   : 'loop' ,
    perPage: 3, 
    focus  : 'center', 
  } ).mount();
})

このように記述します。’.splide’ となっている箇所にスライドのコンテナとなる要素(上のHTMLにおける <div class=”splide”> )を入れます。

詳細なオプションにつきましては、このページを見てみると良いかもしれません。とりあえず自分で触ってみると簡単に使用できるようになります。

最後に

今回は、Vanilla jsでスライダーを実装できる「Splide.js」について解説しました〜。簡単に使えるのでお試しあれ