【Splide.js】幅がバラバラな画像を高さを揃えて無限ループさせる方法②

2025.09.25 2025.09.25

※本ブログの目的は個人の備忘録であり、コードは参考用として掲載しています。
実際に使用される際は、ご自身の環境で十分に動作確認を行ってください。
コードの利用によって生じたいかなる問題についても責任を負いかねますので、あらかじめご了承ください。

はじめに

Webサイトでロゴや作品ギャラリー、バナーなどの画像をスライダーで表示したいとき、画像ごとに横幅が異なる場合は少なくありません。

その方法として、以前cssのみで幅がバラバラな画像を高さを揃えて無限ループさせる方法を紹介しました。

【CSS】幅がバラバラな画像を高さを揃えて無限ループさせる方法

今回は別の方法として、 Splide という軽量のスライダーライブラリを利用する方法を紹介します。

Splideは依存ライブラリなしで動作し、無限ループや自動スクロールなども簡単に実装できます。

Splideの基本的な特徴

軽量で高速、依存ライブラリなし
無限ループや自動スクロールに対応
モバイル対応済みで、タッチ操作やドラッグも可能
オプションを組み合わせるだけで、複雑なスライダーも簡単に作成できる

同じようなJSライブラリとして、Swiperがありますが、Swiperでは自動再生時の無限ループが少し制約があります。

Swiper v9以降では、自動再生と無限ループを組み合わせる際に、slidesPerView の枚数やスライド数によってはループが正しく動作しない場合があります。

一方、Splideでは autoScroll と loop を組み合わせるだけでスムーズに自動スクロールを実現できます。

完成サンプル

完成したループスライドはこちらです。

Splideの使い方

CDNで簡単に読み込めます。CSSやJSを読み込みます。

基本の使い方は公式サイトでも丁寧に記載されていますので、つまずいた方はこちらから確認してみてください。

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

あとは以下のように書くだけで、デフォルトの状態で動きます。

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">スライド1</li>
      <li class="splide__slide">スライド2</li>
      <li class="splide__slide">スライド3</li>
      <!-- 必要に応じてスライドを追加 -->
    </ul>
  </div>
</div>

<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    var splide = new Splide( '.splide' );
    splide.mount();
  } );
</script>

幅バラバラの画像を高さ揃えで表示するポイント

今回のようなスライダーを作る場合、以下の4点がポイントです。

無限ループにする：type: 'loop'
幅は画像ごとに自動調整：autoWidth: true
高さを揃える：cssでimgに高さを指定する
AutoScrollを利用する

AutoScrollについて

また、splideで自動スクロールを利用する場合、AutoScrollエクステンションを利用する必要があります。

これはsplideの拡張機能で、別途読み込む必要があります。

CDNで読み込む場合は以下のように記述します。他の方法などは詳しく公式サイトに書かれていますので、チェックしてみてください。

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>

Splideを初期化する際、window.splide.Extensionsを渡しましょう。

new Splide( '.splide' ).mount( window.splide.Extensions );

実装コード

それでは実装コードを説明します。

htmlは基本の形に画像を入れ込むだけで大丈夫です。

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="img1.jpg" alt=""></li>
      <li class="splide__slide"><img src="img2.jpg" alt=""></li>
      <li class="splide__slide"><img src="img3.jpg" alt=""></li>
      <li class="splide__slide"><img src="img4.jpg" alt=""></li>
      <li class="splide__slide"><img src="img5.jpg" alt=""></li>
    </ul>
  </div>
</div>

splideを初期化して動かします。

デフォルトだとマウスホバーで自動スクロールが止まるようになっていますので、autoScrollにpauseOnHover:falseやpauseOnFocus:falseを設定しています。

不要な場合は削除していただいて大丈夫です。

またページネーションや矢印ボタン、ドラッグ機能なども不要なのでfalseに設定しています。

document.addEventListener('DOMContentLoaded', function () {
  new Splide('.splide', {
    type: 'loop',            // 無限ループ
    autoWidth: true,          // 幅は画像に合わせる
    gap: 20,                  // スライド間の隙間
    autoScroll: { 
      speed: 0.3,             // ゆっくり自動スクロール
      pauseOnHover: false, 
      pauseOnFocus: false 
    },
    pagination: false,
    arrows: false,
    drag: false,
  }).mount(window.splide.Extensions);
});

あとは好みのcssで装飾してください。

ただし、画像の高さは固定するようにしてください。

.splide__slide img {
  width: auto;
  height: 300px; /* 高さを固定 */
}

まとめ

幅のバラバラな画像を扱う場合でも、Splideを使えば高さを揃えつつ自然に並べるスライダーを簡単に作れます。

無限ループや自動スクロールも組み合わせられるので、ロゴカルーセルや作品ギャラリーなど幅広く活用できます。

splideは公式サイトに参考になるデモサンプルがたくさん掲載されているので、自分のやりたい実装を見つけられるかもしれません。

また、オプションも豊富なのでなので、ぜひ一度ドキュメントを確認してみてください。

参考

Splide - アクセシビリティに配慮した軽量・高機能スライダー