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

<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」について解説しました〜。