プラグイン不要｜CSSだけで作る無限ループスライダー（上下2段・備忘録）

ギャラリーに使える「無限スライダー」をプラグインを使わずに作った方法

ギャラリー用途で使える
「止まらずに流れ続ける無限スライダー」を、
プラグインを使わず カスタムHTML＋CSSのみ で実装した記録です。

実際に動作確認が取れたコードそのままを残した備忘録です。

---

やりたかったこと（前提）

今回やりたかったのは、いわゆる「スライダー」ではなく、

• 画像が 横一列に並び
• 一定の速度で
• 止まらずに流れ続け
• 端まで行ったら 自然にループし
• 画像同士に 隙間が出ない

という
帯状に流れ続けるギャラリー。

一般的なスライダープラグインは
「1枚ずつ切り替える」前提で作られているため、
この用途には合わなかった。

---

プラグインは使わない

最終的に、
カスタムHTML＋CSSアニメーションのみで実装した。

理由は以下の通り。

• JavaScript制御が入らず、挙動が安定する
• 速度がブレない
• 余計な余白やレイアウト崩れが起きにくい
• テーマや環境に依存しにくい

---

カスタムHTMLの考え方

ポイントは2つだけ

1. 流れる本体（.slider）を1つ作る
2. 中身（ul）を同じ並びで2回書く

これで「無限ループ」が成立する。

---

実際に使ったHTML（省略なし・完成版）

※ このまま貼って動くコード（自分のメディアファイルのURLに差し替えればそのまま使えます）

<div class="slider-wrap">

  <!-- 上段：左 → 右 -->
  <div class="slider slider-left">
    <ul>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/ミルキー.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/リボン.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/art.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/art２.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/art3.jpg"></li>
    </ul>
    <ul>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/ミルキー.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/リボン.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/art.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/art２.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/art3.jpg"></li>
    </ul>
  </div>

  <!-- 下段：右 → 左 -->
  <div class="slider slider-right">
    <ul>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/Luceファビコン.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/ナチュラル.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/ブーケ.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/手足セット.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/off.jpg"></li>
    </ul>
    <ul>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/Luceファビコン.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/ナチュラル.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/ブーケ.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/手足セット.jpg"></li>
      <li><img src="https://homepage.beppu-tomoko-office.com/wp-content/uploads/2025/12/off.jpg"></li>
    </ul>
  </div>

</div>

---

追加CSS

※ 外観 → カスタマイズ → 追加CSS にそのまま貼る

/* ===== 無限ループスライダー（上下2段・最終確定版） ===== */

.slider-wrap {
  width: 100%;
  overflow: hidden;
}

.slider {
  display: flex;
  width: max-content;
}

.slider ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.slider li {
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}

.slider img {
  height: 180px; /* 任意で変更 */
  width: auto;
  display: block;
}

/* 上段：左へ */
.slider-left {
  animation: slide-left 40s linear infinite;
}

/* 下段：右へ */
.slider-right {
  animation: slide-right 40s linear infinite;
}

@keyframes slide-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes slide-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (max-width: 768px) {
  .slider img {
    height: 120px;
  }
}

---

なぜこれでうまくいったのか

• 同じ画像セットを2回書いている
  → 常に次の画像が控えている状態になる
• 動かしているのは ul ではなく .slider 全体
• アニメーションは -50% 移動のみ
• width: max-content により、中身基準の横幅になる

結果として、

• 画面幅に依存しない
• スマホでもPCでも切れない
• 画像が重ならない

という挙動が安定して実現できる。

---

書いたあとに気づいた注意点

• 上下の画像枚数はそろえた方がよい
  （今回は上下とも5枚）
• 上段6枚・下段5枚などにすると、
  ループ位置が視覚的に分かりにくくなる
• 検証・再利用のしやすさを考えると
  上下同枚数が安全
• 枚数を変える場合でも
  「同じ並びを2回書く」原則は必ず守る
• 再利用するときは
  画像URLだけ差し替え、構造とCSSは触らない

スライダーに使う画像サイズ

画像サイズについての注意点

無限スライダーを安定して表示させるためには、
画像サイズをそろえておくことが重要です。

本記事の実例では、ラーメン写真をすべて
800 × 800 px の真四角で用意しています。

真四角にしておくことで、

• 高さがそろい、レイアウトが崩れにくい
• スライドの動きが均一になる
• スマホ表示でもガタつきが出にくい

といったメリットがあります。

また、上下段それぞれの画像枚数も同じにしておくと、
無限ループ時のリズムがそろい、
切り替わりの違和感が出にくくなります。

---

全画面表示にしたい場合（ラーメンスライダー）

方法①（おすすめ）

• フルワイドブロック
  • 中に「カスタムHTMLブロック」
  • そこへ上記HTMLを配置

方法②（補足）

.slider-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

※ フルワイドが使えない場合の保険

この記事に関する、ご意見・ご質問等は下にスクロールしてコメント欄からお願いします。

---