CSSだけで画像の自動無限ループ【コピペでOK】

Bicepper

こんにちは！Bicepperです。
Webサイトを作るときによく使うのが、スライダーですよね！

うんうん、JavaScriptを使って画像をスライドさせたりするよね。

プログラミング初心者

Bicepper

そうですよね。
今回は、そんなスライダーをCSSだけで実装する方法を紹介します！

画像やロゴを無限ループさせたいという場面は、Webサイトを作っていてもわりと多いです。

大体の場合はJavaScriptやjQueryのプラグインなどを使用してサクッっと実装してしまうことが多いですが、今回はCSSのみで実装してみたいと思います。

無限ループスライダーの完成形

まず先に、無限ループスライダーの完成形を見てみましょう。

See the Pen
Infinite Loop by NewGorilla (@NewGorilla)
on CodePen.

デザインの部分は最低限しか揃えていませんので、使う人は各自の調整をお願いします！

無限ループスライダーのHTML

それではHTMLを見ていきましょう。

<div class="slider">
  <div class="slider-wrap">
    <div class="slide">
      <img src="https://cdn.pixabay.com/photo/2016/11/21/12/29/animal-1845060_960_720.jpg" class="slide-image" alt="HTML">
    </div>
    <div class="slide">
      <img src="https://cdn.pixabay.com/photo/2018/10/19/10/33/springbok-3758346_960_720.jpg" class="slide-image" alt="HTML">
    </div>
    <div class="slide">
      <img src="https://cdn.pixabay.com/photo/2019/07/10/08/31/animal-4328196_960_720.jpg" class="slide-image" alt="HTML">
    </div>
    <div class="slide">
      <img src="https://cdn.pixabay.com/photo/2016/11/21/12/29/animal-1845060_960_720.jpg" class="slide-image">
    </div>
    <div class="slide">
      <img src="https://cdn.pixabay.com/photo/2018/10/19/10/33/springbok-3758346_960_720.jpg" class="slide-image">
    </div>
    <div class="slide">
      <img src="https://cdn.pixabay.com/photo/2019/07/10/08/31/animal-4328196_960_720.jpg" class="slide-image">
    </div>
  </div>
</div>

まず一番外枠をsliderで囲っています。

画像を横並びにするのですが、その際にはみ出した画像を隠す役割がこのsliderですね。

次のslider-wrapは、画像を横並びにする役割と画像をスクロールさせる役割の2つを担っています。

さて、今回のHTMLで最も大事なことは、同じ画像を2回繰り返して書いているということです。

2回繰り返している？

プログラミング初心者

一見6枚の画像が並んでいるように見えますが、HTMLをよく見ていただくと３枚の画像を２回繰り返して書いています。
これがループさせるための重要なポイントです。

ちょっと冗長的かなーとは思いますが、今回はあくまでも「CSSのみで完結する」ことが目的なのでご容赦ください！

無限ループスライダーのCSS

次にCSSを見てみましょう。

まずここの部分です。

.slider-wrap {
	animation: scroll 10s linear infinite;
	display: flex;
	width: calc(250px * 6);
	height:100%;
}

さきほどslider-wrapは横並びの役割と言いましたが、それがdisplay: flex;です。

width: calc(250px * 6);は、画像一つあたりの横幅 * 枚数（HTML上は2倍）になります。

今回は画像一つあたり250pxで画像枚数3枚 * 2の計6枚ですね。

一番上のanimation: scroll 10s linear infinite;が横スクロールを動かしています。読めば何となくわかると思いますが、「10秒（10s）サイクルで、一定の変化（linear）で無限（infinite）にスクロール（scroll）させる」という風に書かれています。

さらに、このscrollで、どのようにスクロールさせるかというのを設定しているのがこちらです。

@keyframes scroll{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 3));
  }
}

この@keyframesが、アニメーションの始まりから終わりまでの動きを指定しています。実は先ほどで出てきたscrollは、ここで決められた名称なのです。

0%がアニメーションの開始であり、100%がアニメーションの終了です。ここでのポイントはcalc(-250px * 3)です。

-（マイナス）を指定することで、スライドが右から左になります。

HTML上は画像枚数を６枚指定しましたが、本来の枚数は3枚です。なので、アニメーションの終わりの長さを、「-250px * 3 = -750px」に設定することで、無限ループっぽく表現されるようになります。

【まとめ】CSSだけでも無限ループスライダーは作れる

今回は、CSSだけで画像の自動無限ループを作る方法を紹介しました。

コピペだけでも動きますし、そこまで難しくもないのでプログラミング初心者・コーディング初心者の方でも改変が容易です！

ぜひ使ってみてください！