Webサイト制作で「軽量・高速・柔軟」なスライダーといえば Splide。
デザイン再現性も高く、WordPressや静的サイトでも幅広く利用されています。
しかし、Splide導入後に次のような症状に悩まされるケースも多いはずです。
- スライダーの読み込み時に真っ白になる
- サムネイルだけ透明画像のまま
- 画像の高さが0pxになりレイアウト全体が崩れる
- 背景に謎の透明PNG（base64）が表示される
<img>タグが勝手にdisplay:noneにされている- data-src のまま画像が読み込まれない
実はこれ、ほとんどのケースで Lazy Load（画像の遅延読み込み） が原因です。
本記事では、
Splide × WordPress × LazyLoad プラグイン
この組み合わせで発生するトラブルと、その解決方法を実際のコード例付きで解説していきます。
なぜ Splide と Lazy Load の相性が悪いのか？
最近のWordPressでは、以下のような仕組みが自動で働いています。
- WordPress本体の
loading="lazy" - 画像最適化プラグイン（EWWW / Jetpack / LiteSpeed Cache）
- テーマ側のLazyLoad機能
- Autoptimize / WP Rocket などの最適化プラグイン
これらは「ページの高速化」を目的に、ページ上にある <img> タグを次のように書き換えます。
▼ 典型的なLazy Load書き換え例
<img class="lazyload"
data-src="https://example.com/sample.jpg"
src="data:image/png;base64,iVBORw0K..."
style="display:none;">Lazy Loadの仕組みは、
- 本物の画像 →
data-src - 本物の
<img>→ 非表示にする - 代わりに極小の透明PNGを背景画像として表示させる
- JavaScriptで画面に入った瞬間に本物を読み込む
という動作です。
しかし Splide は、
- スライドの幅と高さを初期表示で計算する
<img>が非表示または 0px だと計算が成立しない- 背景の透明PNGが読み込まれてしまいズレが発生
- そのままスライダー全体が崩壊する
という仕様上、「初期表示で画像が存在すること」が前提になっています。
つまり、
Lazy Load のせいで Splide が「画像なし状態」と認識してしまっているのです。
実際に起こったトラブル例
実際のコード例を見ると、背景に透明PNGが差し込まれています。
<div class="splide__slide thum is-visible"
style="background: url('data:image/png;base64,...') center/cover no-repeat;">
<img class="lazyload"
data-src="https://example.com/img.jpg"
style="display:none;">
</div>これは EWWW Image Optimizer などの LazyLoad が書き換えている典型例です。
この状態になると、
- サムネイルがずっと透明
- クリックしても画像が切り替わらない
- 最初の一枚しか表示されない
- レイアウトが崩れる
などの症状が100％再現します。
Lazy Load を解除する方法はいくつかある
プラグインの設定でLazy LoadをOFFにする（最も安全）
WordPress管理画面 → 使用しているプラグインの LazyLoad 設定をOFFにします。
例：EWWW Image Optimizer
設定 → EWWW Image Optimizer → 遅延読み込み → OFFただし、全サイトのLazyLoadがOFFになるため、ページスピードが落ちる場合があります。
最も確実＆安全：skip-lazy クラスを使う方法
LazyLoadプラグインの大半は、skip-lazy クラスが付いた要素は遅延読み込みの対象外にする
という共通仕様があります。
▼ 実際に使われたコード
echo "<div class='splide__slide thum skip-lazy'>
<img src='""' alt=''>
</div>";これを追加するだけで、
data-srcへの書き換えが消えるclass="lazyload"が付かなくなるdisplay:noneが付かなくなる- 背景の透明PNGも出なくなる
- Splide が正しく画像サイズを計算できる
つまり 完全な解決になります。
skip-lazy を付ける場所はどこ？
<div> に付ける方法
（EWWW・WP Rocket・Autoptimizeなどに有効）
<div class="splide__slide skip-lazy"><img> に付ける方法
（Jetpack Lazy Loadなどに有効）
<img class="skip-lazy" src="〜">どちらでもOKですが、div に付ける方が事故が起きにくくおすすめです。
実際に修正するコード例（WordPress + ACF ギャラリー）
before（LazyLoadが強制されてしまう）
echo "<div class='splide__slide'>
<img src='" "' alt=''>
</div>";after（遅延読み込みを解除）
echo "<div class='splide__slide thum skip-lazy'>
<img class='skip-lazy' src='""' alt=''>
</div>";どちらか一方でOKですが、両方に付けるとほぼ100% LazyLoad を防げます。
Splide の初期化側での注意点
LazyLoadが絡むと、初期化タイミングも重要です。
document.addEventListener( 'DOMContentLoaded', function () {
var splide = new Splide( '#main-carousel', {
type: 'loop',
perPage: 1,
} );
splide.mount();
});これで
- DOM準備前に初期化しない
- 画像が存在しない状態での mount を防ぐ
ことができます。
それでも直らない場合は？
以下のチェックをしてください。
テーマ側の LazyLoad（functions.php）
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
があるか？
LiteSpeed Cache の LazyLoad
Litespeed は CSS 背景画像まで遅延します。
Autoptimize の「画像を最適化する」
data-src が自動付与される場合があります。
LazyLoad の JS がエラーで止まっている
console error も確認しましょう。
まとめ：Splide が崩れる原因の80%は Lazy Load
Splide × WordPress LazyLoad のトラブルまとめ
| 症状 | 原因 | 解決策 |
|---|---|---|
| 画像が透明PNGになる | LazyLoadが書き換え | skip-lazy |
| 画像が非表示（display:none） | EWWW LazyLoad | skip-lazy |
| スライダー初期化で崩れる | 画像が読み込まれていない | skip-lazy / eager |
| サムネイルだけ動かない | data-src 使用 | skip-lazy |
| 高さ0pxになる | Splideが画像サイズを取得できない | skip-lazy |
最終的に「skip-lazy」が一番強い理由
- プラグイン設定を変えなくてよい
- SEO影響なし
- 上部のみLazyLoad解除 → ページ速度を保てる
- Splideだけ正常に動く
- コード変更が最小
制作現場では、スライダー部分だけ LazyLoad を解除する
というのが最も合理的です。
この記事の想定読者へ（メッセージ）
本記事は Web制作者向けですが、クライアントにも説明しやすいように
- 課題
- 原因
- 解決
- 実例
が明確にわかる構成にしています。
Web制作現場では、プラグインが裏で大量の書き換えを行っているため、
Splideのように「画像の存在前提」で動くライブラリはよくトラブルが発生します。
もし「画像が出ない」「スライダーが崩れる」という相談を受けたら、
まずは Lazy Load が悪さをしていないか？ を確認してみましょう。
きっと今回の方法が役に立つはずです。