目次
目次

CSSのみで無限ループスライダーを作る方法

Cocoonカスタマイズ集
この記事は約6分で読めます。
記事内に広告が含まれています。

はじめに

以下の記事では、ライブラリ「Swiper.js」を使用して、無限ループするスライダーを紹介しました。

Swiperで無限ループスライダーを作る際の注意点
「Swiper.jsで無限ループスライダーを作る方法」を解説。一定速度で連続スクロールさせる設定や、マウスオーバー時の停止、画面内に入ったときの自動再生、スライドが滑らかに再開するための調整方法を分かりやすく紹介します。
ss1.xrea.com

ただし、Swiperを使わずに、CSSのみで同様の無限ループスライダーを実現することも可能です。
さらに、画像にマウスオーバーした際にスライダーの動きが一時停止する仕組みも取り入れています。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で作成します。

    1. 「画像」ブロックを配置し、高度な設定→追加CSSクラスにslideと入力します。
    2. 複数の「画像」ブロックを横並びにし、グループ化して高度な設定→追加 CSSクラスにslider-wrapperと入力します。
    3. 手順2で作成したグループブロックを「複製」します。
    4. 複製した2つのグループをさらに横並びにし、全体をグループ化して高度な設定→追加CSSクラスにslider-containerと入力します。
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    .slider-container {
  gap: 0;
  overflow: hidden;

  @media (hover: hover) {
    &:hover .slider-wrapper {
      animation-play-state: paused;
    }
  }

  .slider-wrapper {
    animation: horizontal-animation 20s linear infinite;
    gap: 0;
    margin-bottom: 0;
  }

  .slide {
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
    width: 250px;

    img {
      height: 100%;
      object-fit: cover;
    }
  }
}

@keyframes horizontal-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

各ブロックのマージンやブロック間の間隔などを、ブロックの設定から調整することで、CSSの記述を最小限に抑えることも可能です。

解説

[1]  [2]  [3]  [4]  [1]  [2]  [3]  [4]
↑                ↑
開始位置(0%)      アニメ終了位置(-100%)
  • 同じ画像セットを2回定義
    同じ画像セットを2回繋げることで、1セット目が左にスライドして表示領域から消える頃に、2セット目がちょうど表示領域に入ってくるため、切れ目のないループのように見えます。
    1セットだけだと、全ての画像がスライドし終わったあとに空白ができてしまいます。
  • 画像マウスオーバーでの停止
    「マウスオーバー操作が可能なデバイス」の場合に限り、スライダーにマウスを乗せるとアニメーション（スライド）が一時停止します。
@media (hover: hover) {
  /* マウスなどでhoverが可能なデバイス向けのスタイル */
}

参考：1枚ずつ全画面に表示してスライドする方法

スライド画像をコンテンツ幅いっぱいに表示し、1枚ずつ切れ目なくスライドさせる方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で作成します。

    1. 「画像」ブロックを配置し、高度な設定→追加CSSクラスにslideと入力します。
    2. 1番目の画像を最後にコピーします。
    3. 複数の「画像」ブロックを横並びにし、グループ化して高度な設定→追加 CSSクラスにslider-wrapperと入力します。
    4. 複製した2つのグループをさらに横並びにし、全体をグループ化して高度な設定→追加CSSクラスにslider-containerと入力します。
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    .slider-container {
  --slide: 4;
  overflow: hidden;

  .is-layout-flex {
    animation: slide-left 40s linear infinite;
    gap: 0;
  }

  .slide {
    flex-shrink: 0;
    margin: 0;
    width: 100%;

    img {
      height: 300px;
      margin: 0;
      object-fit: cover;
      width: 100%;
    }
  }
}

@keyframes slide-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(-100% * var(--slide)));
  }
}

解説

1枚のスライドが表示領域いっぱいに広がる構成では、1セットのスライドの最後に最初のスライド画像を1枚だけ複製することで、切れ目のないループが実現できます。
これは、アニメーションが最後のスライドを表示し終わったときに、複製された1枚目がちょうど画面に現れるように移動するためです。

さいごに

今回紹介した方法を使えば、JavaScriptなしで軽量かつシンプルに無限ループスライダーを実装できます。
さらにマウスオーバー時に動きを停止させることも可能なので、ユーザーの操作性も向上します。
画像にリンクを設けるなどの工夫を加えれば、よりインタラクティブで実用的なスライダーにすることもできます。

タイトルとURLをコピーしました