CSS Web制作

CSSのみで横方向に流れ続ける無限ループスライダーを作る方法【コピペOKなデモあり】

2024年2月11日

※ 当サイトではアフィリエイト広告を利用しています

CSSだけで無限ループするスライドショーって作れる?

Swiper・slick・Splideなど、スライダー系のライブラリなどを使えば、無限ループスライダーは作れます。

しかし、CSSだけでも簡単に実装することができます。

こちらがデモになります。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

今回は、このCSSだけで無限ループスライダーを作る方法を解説していきます。

ちなみに、先ほどのライブラリを使った方法は以下になります。

あわせて読みたい
【Swiper】横方向に流れ続ける無限ループスライダーを作る方法
【Swiper】横方向に流れ続ける無限ループスライダーを作る方法

続きを見る

あわせて読みたい
【slick】横方向に流れ続ける無限ループスライダーを作る方法
【slick】横方向に流れ続ける無限ループスライダーを作る方法

続きを見る

あわせて読みたい
【Splide】横方向に流れ続ける無限ループスライダーを作る方法
【Splide】横方向に流れ続ける無限ループスライダーを作る方法

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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

それでは、早速ですがCSSのみで無限ループスライダーを作る方法を解説していきます。

HTMLとCSSを書くだけですが、CSSではCSSアニメーションを使います。

 

HTMLのコード

HTMLのコードはこちらです。

<div class="slider-wrapper">
  <ul class="slider">
    <li class="slide">
      <img src="画像パス1" alt="" />
    </li>
    <li class="slide">
      <img src="画像パス2" alt="" />
    </li>
    <li class="slide">
      <img src="画像パス3" alt="" />
    </li>
  </ul>
  <ul class="slider">
    <li class="slide">
      <img src="画像パス1" alt="" />
    </li>
    <li class="slide">
      <img src="画像パス2" alt="" />
    </li>
    <li class="slide">
      <img src="画像パス3" alt="" />
    </li>
  </ul>
</div>

これで、3枚のスライドを表示させます。

ポイントは、同じスライドのグループを1つではなく2つ作ることです。

もしこれが1つだと、このようになります(言葉で解説するより、実際に見た方が分かると思います)

See the Pen
CSSのみで無限ループスライダー(スライダーが1つしかない場合)
by junpei (@junpei-sugiyama)
on CodePen.

 

CSSのコード

続いてCSSのコードはこちらです。

/* スライダー全体 */
.slider-wrapper {
  display: flex; /* スライドのグループを横並び */
  overflow: hidden; /* はみ出たスライドを隠す */
}
/* スライド3枚のグループ */
.slider {
  animation: scroll-left 20s infinite linear .5s both;
  display: flex; /* スライド3枚を横並び */
}
/* スライド */
.slide {
  width: calc(100vw / 3); /* 3はスライドの枚数 */
}
/* スライドの画像 */
.slide img {
  display: block;
  width: 100%;
}
/* CSSアニメーション */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

補足します。

overflow: hidden;に関しては、スライダーが画面幅いっぱいなら関係ありませんが、そうでなければ2つ目のスライダーがはみ出てしまうので書いています。

animation: scroll-left 20s infinite linear .5s both;は、CSSのプロパティanimationのショートハンドになります。

意味は以下になります。

animation-name: loop-slide; /* アニメーション名 */
animation-duration: 20s; /* アニメーション開始から終了までの時間 */
animation-iteration-count: infinite; /* アニメーションの回数 */
animation-timing-function: linear; /* アニメーションが変化する速度 */
animation-delay: .5s; /* アニメーション開始までの遅延時間 */
animation-fill-mode: both; /* アニメーション開始と終了時の状態 */

animation-iteration-countinfiniteは、『無限ループ』となります。

animation-timing-functionlinearは、『等速』となります。

animation-fill-modebothはちょっとイメージしにくいですが、アニメーションが終了した後も最後のキーフレームの状態を維持することを意味します。

つまり、アニメーションが終了した後も最後のキーフレームの状態が維持されます。

そして、最後のスライドに到達した後も連続してスライドするためにbothを指定しています。

 

デモ

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.



逆方向(右方向)の無限ループスライダーを作る方法

先ほどは左方向に流れるスライダーでしたが、右方向にする方向を解説します。

HTMLに変更はありません。

 

CSSのコード

/* 修正前(左方向) */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* 修正後(右方向) */
@keyframes scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

左方向の場合は、0から-100とマイナス方向に移動します。

右方向の場合は、-100から0とプラス方向に移動します。

あとはアニメーション名を変える必要はありませんが、右方向に移動させるのにscroll-leftは変なので、scroll-rightに変更しています。

もちろんscroll-rightにしたら、animation: scroll-left 20s infinite linear .5s both;animation: scroll-right 20s infinite linear .5s both;に変更しましょう。

 

デモ

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.



hover(マウスオーバー)で一時停止させる方法

先ほどまでは、スライドにマウスカーソルを乗せても動き続けていましたが、カーソルを乗せると一時停止させる方法を解説します。

 

CSSのコード

CSSは以下のコードを追記します。

/* hover(マウスオーバー)で一時停止 */
.slider-wrapper:hover .slider {
  animation-play-state: paused;
}

スマホでタップしても止まります。デモで確認してみて下さい。

 

デモ

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.



hover(マウスオーバー)で拡大させる方法

今度は、スライドにマウスカーソルを乗せると画像が拡大する方法を解説します。

 

CSSのコード

CSSは以下のコードを追記します。

/* hover(マウスオーバー)で拡大 */
.slide {
  cursor: pointer;
  overflow: hidden;
}
.slide img {
  transition: transform 0.4s;
}
.slide:hover img {
  transform: scale(1.1);
}

transitionを書かないとカーソルを乗せたら一瞬で拡大されるので、じんわり拡大させる場合には必須です。

また、overflow: hidden;で拡大した画像がはみ出ないようにしています。

それに関しては以下の記事を参考にしてみて下さい。

あわせて読みたい
【CSS】hover(マウスオーバー)で画像を拡大する方法
【CSS】hover(マウスオーバー)で画像を拡大ズームする方法

続きを見る

 

デモ

See the Pen
CSSのみで無限ループスライダー(hover(マウスオーバー)で拡大)
by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回は、CSSのみで横方向に流れ続ける無限ループスライダーを作る方法を解説してきました。

ライブラリを使いたくない、または使わないようにと指定された場合は、この方法を使ってみましょう。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-CSS, Web制作