はじめはswiper.jsを使っていたが、ページの読み始めが遅く感じていた。 探してみるとより軽量なライブラリが見つかったので実装してみた。
基本的な設定はswiper.jsとほとんど一緒。 ボタンやページネーションの設定はより簡単になった。
CDNへのリンクをHTMLの<head>タグ内に記述。 メインとなるstyle.cssは一番最後に書くのが望ましいらしい。
<head>
～省略～
<!-- splide.jsへのCDNのリンク -->
<script src="<https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js>"></script>
<link href="<https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css>" rel="stylesheet" />
<!-- style.cssへのリンク -->
<link rel="stylesheet" href="css/style.css" />
</head>
いつも通り終了の</body>タグの直前にjsファイルへのリンクを記述。
<script src="js/script.js"></script>
</body>
<!-- splide スライダー ここから -->
<div class="splide-container">
<!-- splide というクラス名が必要 id名はjavascriptの指定用に使っている -->
<div class="splide cat-slider" id="js-splide-basic">
<!-- スライド要素を包む要素 クラス名は固定(class="splide__track") -->
<div class="splide__track">
<!-- スライドリスト クラス名は固定(class="splide__list") -->
<ul class="splide__list">
<!-- 各スライドリスト クラス名は固定(class="splide__slide") -->
<li class="splide__slide"><img src="images/slide1_white.jpg" /></li>
<li class="splide__slide"><img src="images/slide2_hug.jpg" /></li>
<li class="splide__slide"><img src="images/slide3_shocked.jpg" /></li>
<li class="splide__slide"><img src="images/slide4_home.jpg" /></li>
<li class="splide__slide"><img src="images/slide5_blue_eyes.jpg" /></li>
<li class="splide__slide"><img src="images/slide6_shout.jpg" /></li>
</ul>
</div>
</div>
</div>
<!-- splide スライダー ここまで -->
この中でいくつかのクラス名は固定しておかないと動作しなくなる。 [class=”splide”] [class=”splide__track”] [class=”splide__list”] [class=”splide__slide”] 上記の例ではCSSを適用するために「cat-slider」というクラス名を付与している。 id名はいつも通りJavascriptの指定用に使っている。
slider自体の幅は100%で指定しておき、親要素の[splide-container]の幅を変更することでスライダーのレイアウトを指定すると融通がききやすい。
<script>内またはjsファイル内に書くことでスライダーが生成される。
new Splide( '#任意の名前' ).mount();