【Splide】vanilla jsでスライダー実装!カスタム方法も解説

今回はjQueryを使用せず、超簡単にスライダーが実装できる「Splide.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です。

const slide = new Splide('.splide', {
  type: 'loop', //スライドの動作方法の設定
  perPage: 3, //一度に表示するスライドの数
  pagination: true, //ページネーションの表示、falseで非表示
  heightRatio: 0.725, //スライドの縦横比の設定も可能、この場合「縦72.5% : 横100%」
  breakpoints: { //ブレイクポイントの設定も可能です
    768: { //ここで画面幅を指定
      perPage: 1
    }
  }
})
slide.mount()

このように記述します。

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

詳細なオプションにつきましては、このページを見てみると良いかもしれません!

よく使うスライダーのカスタマイズを紹介

紹介の最後に、自分がよく使用するスライダーのカスタマイズも紹介します。

2つのスライダーを連動させる

メインのスライダーとサブのスライダーを連動させるカスタマイズです。

まず、メイン・サブ共に先述した通りの書き方でスライダーを作成し、その後以下のコードを使用すると、2つのスライダーが連動するようになります。

mainSlider.sync(subSlider); //mainSlide=メインのスライダー、subSlider=サブのスライダー

最後に

今回は、Vanilla jsでスライダーを実装できる「Splide.js」について解説しました〜。