JavaScript不要！@keyframesを使ったお手軽スライドショー

2021-12-24

JavaScriptやSwiper.jsを使わず、CSSのみで簡単なスライドショーを作ってみたいと思います。

実装目標の確認

一定の速度でずーっと流れ続けるスライドショーを作ります。

HTML & CSS コード例

<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

.container {
  width: 100%;
  overflow: hidden;
}

ul {
  padding-left: 0;
  display: flex;
  width: calc((150px + 10px) * 12);
  animation: move 20s linear infinite;
}

li {
  list-style: none;
  width: 150px;
  height: 150px;
  margin-right: 10px;
  background-color: #95D1CC;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX( calc((150px + 10px) * 6 * -1) );
  }
}

コード解説

簡易的に3枚のスライドA・B・Cでスライドショーを作る場合の図を作成してみました。

まず上側が初期状態ですが、スライドリストを2セット<ul></ul>内に作成しているので一部は表示部分の外で待機している状態です。

スライドが徐々に左に移動すると、待機していたスライドが現れてしばらくすると下側の図の状態になるはずです。

そのタイミングで初期状態に戻す、というのを繰り返せば無限にスライドショーが繰り広げられます。

.container {
  width: 100%;
  overflow: hidden;
}

表示部分からはみ出る部分は非表示にしています。

ul {
  padding-left: 0;
  display: flex;
  width: calc((150px + 10px) * 12);
  animation: move 20s linear infinite;
}

HTMLで「1～6」のスライドリストを2セット用意しているので、<ul></ul>の幅は（各リストの幅+マージン）×12となります。

スライドの速さを変えるにはanimationの秒数を変えてください。

表示部分よりスライドの長さが短い場合は2倍では足りませんので、4倍とかにして試してください。

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX( calc((150px + 10px) * 6 * -1) );
  }
}

アニメーションの動きを決める@keyframesを設定しています。

「2倍の長さで作ったリスト」の半分が移動した時をアニメーションの終点とします。

-1をかけているのは左方向に移動させるためです。

右方向に移動させる場合は以下のようにします。

@keyframes move {
  0% {
    transform: translateX( calc((150px + 10px) * 6 * -1) );
  }
  100% {
    transform: translateX(0);
  }
}

まとめ

いかがでしたか？

今回<li></li>内には簡易的に数字を入れただけですが、画像を入れたりコンテンツを入れたり、応用して使えるかと思います。

ぜひチャレンジしてみてください。

最後までご覧いただきありがとうございました。

blog

JavaScript不要！@keyframesを使ったお手軽スライドショー

実装目標の確認

HTML & CSS コード例

コード解説

まとめ