Splideは、軽量で高機能なJavaScript製スライダーライブラリです。画像やコンテンツをスライド形式で表示する際に非常に便利で、シンプルな設定でレスポンシブ対応も可能です。
しかし、実際に実装してみると「Splideが表示されない」「動かない」といったトラブルが発生することがあります。本記事では、そんなトラブルの原因と解決策を詳しく解説していきます。
また、Splideのカスタマイズ方法として「無限ループ」「サムネイル付きスライダー」「1枚の時の対応」「スマホのみ適用」「複数設置」などのポイントも紹介します。これを読めば、Splideのエラー解決だけでなく、より自由度の高いスライダーを作れるようになるはずです。
目次
Splideが表示されない原因と対処法
1. JavaScriptファイルが正しく読み込まれていない
SplideはJavaScriptで動作するため、スクリプトが正しく読み込まれていないと動作しません。
【解決策】
- SplideのCDNまたはローカルファイルが適切に読み込まれているか確認
<head>または<body>内のスクリプトの記述順を見直す
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/css/splide.min.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/js/splide.min.js"></script>
</body>2. Splideの初期化処理が正しく記述されていない
JavaScriptでSplideを初期化するコードが適切でないと、スライダーが機能しません。
【解決策】
- Splideの初期化コードを記述し、適切なタイミングで実行されるようにする
document.addEventListener('DOMContentLoaded', function () {
new Splide('#splide').mount();
});3. HTMLのクラスやIDの間違い
Splideを正しく動作させるためには、HTMLのクラスやIDが適切に設定されていることが重要です。例えば、.splide__list や .splide__slide などのクラス名が抜けていると、スライダーが正しく機能しません。
【解決策】
以下のHTML構造が正しいかチェックしましょう。
<div id="splide" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 1</li>
<li class="splide__slide">Slide 2</li>
<li class="splide__slide">Slide 3</li>
</ul>
</div>
</div>Splideが動かない場合の追加チェックポイント
1. CSSの干渉
他のCSSの影響で、Splideのスライダーが意図しない表示になっている可能性があります。
【解決策】
overflow: hidden;が設定されているか確認display: none;になっていないか確認.splide__slideに適切なwidthが設定されているかチェック
.splide__slide {
width: 100%;
}2. JavaScriptの競合
他のスクリプトと干渉してSplideが正しく動作しないことがあります。
【解決策】
- 他のJavaScriptライブラリと競合していないか確認
- jQueryと併用する場合、jQueryのバージョンを確認
Splideのカスタマイズ方法
1. 無限ループを設定する
スライダーを無限ループさせたい場合、type: 'loop'を指定します。
new Splide('#splide', {
type: 'loop',
}).mount();2. サムネイル付きスライダーの実装
サムネイル付きスライダーを作成するには、syncを使います。
var main = new Splide('#main-slider', { type: 'fade' }).mount();
var thumb = new Splide('#thumbnail-slider', {
fixedWidth: 100,
fixedHeight: 64,
isNavigation: true,
}).mount();
main.sync(thumb);3. 1枚の時にレイアウトが崩れないようにする
new Splide('#splide', {
perPage: 1,
perMove: 1,
}).mount();まとめ
Splideが「表示されない」「動かない」場合の原因と解決策を紹介しました。
- JavaScriptが正しく読み込まれているか確認
- Splideの初期化コードが適切か見直す
- HTMLやCSSの構造をチェック
- CSSの干渉やJavaScriptの競合も確認する
また、無限ループやサムネイル、スマホ対応などのカスタマイズ方法についても解説しました。Splideを活用して、自由自在なスライダーを作成しましょう！
