Webサイトにスライドギャラリーを導入する際、軽量でカスタマイズ性の高いライブラリとして Splide.js が便利です。
この記事では、実際に導入した 標準スライド と オートスクロール（拡張） の2パターン、さらに preloadオプションを調整して表示速度を改善する方法 を紹介します。
目次
基本の導入
CSS / JS の読み込み
WordPress の場合は functions.php に追記します。
if ( is_page(13286) ) { // ページ指定（任意）
// Splide本体
wp_enqueue_style(
'splide-css',
'https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css',
array(),
'4.1.4'
);
wp_enqueue_script(
'splide-js',
'https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js',
array(),
'4.1.4',
true
);
}
HTML構造
<div id="splide" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="slide1.jpg" alt=""></li>
<li class="splide__slide"><img src="slide2.jpg" alt=""></li>
<li class="splide__slide"><img src="slide3.jpg" alt=""></li>
</ul>
</div>
</div>
パターン① 標準のオートスライド
コマ送りのように「一定時間ごとに切り替え」するオートスライド。
document.addEventListener('DOMContentLoaded', function () {
new Splide('#splide', {
type: 'loop',
perPage: 1,
autoplay: true,
interval: 3500, // 切り替え間隔
speed: 800, // アニメーション速度
pauseOnHover: true,
pauseOnFocus: false,
arrows: false,
pagination: true,
}).mount();
});
パターン② 拡張オートスクロール（流れ続けるスライド）
AutoScroll 拡張をfunctions.php に追加します。
// functions.php
wp_enqueue_script(
'splide-auto-scroll',
'https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js',
array('splide-js'),
'0.5.3',
true
);
初期化コード：
document.addEventListener('DOMContentLoaded', function () {
var splide = new Splide('#splide', {
type: 'loop',
perPage: 5,
gap: '24px',
arrows: false,
pagination: false,
drag: false, // ユーザー操作なし
autoScroll: {
speed: 1.2, // 流れる速度(px/ms)
pauseOnHover: true,
pauseOnFocus: false,
},
});
splide.mount(window.splide.Extensions);
});
最初の表示を高速化する preloadImages オプション
初期表示が遅く感じるときは、以下を加えると改善できます。
new Splide('#splide', {
// ...
preloadImages: false, // 全画像を先読みしない
lazyLoad: 'nearby', // 近いスライドを順次読み込み
});
これで「最初のスライドだけ先に表示 → 周辺スライドをあとから読み込み」になり、初動が軽くなります。
まとめ
- 標準オートスライド → 一定間隔で切り替わるスライド
- オートスクロール拡張 → 常時流れ続けるスライド
- preloadImages: false + lazyLoad → 最初の表示を高速化
サイトの雰囲気や目的に合わせて、最適な方式を選べます。
