CSSのみで横方向に流れ続ける無限ループスライダー

Swiper・slick・Splideなど、スライダー系のライブラリなどを使えば、無限ループスライダーは作成できるが、CSSだけでも簡単に実装することができる。

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つの場合、最後の画像が画面端に到達すると、一瞬でスタート位置に戻ってしまう）。

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-countのinfiniteは、『無限ループ』となる。
animation-timing-functionのlinearは、『等速』となる。
animation-fill-modeのbothはややイメージしにくいが、アニメーションが終了した後も最後のキーフレームの状態を維持することを意味する。つまり、アニメーションが終了した後も最後のキーフレームの状態が維持される。
そして、最後のスライドに到達した後も連続してスライドするためにbothを指定している。

また、逆方向（右方向）の無限ループスライダーを作る場合は、translateXを[from]-100%から[to]0とプラス方向に移動させる。

inserted by FC2 system