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