CSS Web制作

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

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

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回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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 {
  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のみで横方向に流れ続ける無限ループスライダーを作る方法を解説してきました。

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作