CSSのみで実装！画面端から無限ループするスライドの作り方

サイト内の画像の見せ方のひとつとして、写真や画像の一覧を画面端から無限ループするスライドがあります。

縦のスペースをとらずに多くの写真を見せることができるので、企業のサービスサイトの実績紹介や取引先一覧などで、よく使われているイメージがありますね。

そんな無限ループのスライドですが、実はCSSだけで実装することができます。

ということで今回は「CSSのみで実装！画面端から無限ループするスライドの作り方」をご紹介します！

1枚の画像の場合と複数要素の場合の2種類の方法がありますので、それぞれ説明していきます！

目次非表示

1枚の画像から作る方法
複数要素から作る方法
- HTML
- CSS

目次へ

1枚の画像から作る方法

最初に「1枚の画像から作る方法」をご紹介します。

画像を作成する

まず、スライドさせたい画像を横に並べて、1枚の画像として作成します。

私は食べることが好きなので、pixabayで見つけた食べ物の写真を横並びにしました。

HTML

次にHTMLです。先ほど作った画像を読み込みます。

div要素の中に先ほど作った画像を含んだimgタグを入れるのですが、この時必ず２つ入れてください。

<div class="loopSlide">
  <img src="画像URL"><img src="画像URL">
</div>

CSS

続いてCSSです。

divにdisplay:flexで中の<img>を横並びにしています。

画面幅いっぱいにするためのwidth:100vwと、はみ出した部分を非表示にするoverflow:hiddenを記述します。（隠さないと画像がはみ出しまくります。）

高さはスライドの高さになるのでお好みで！

※ちなみにコードはSCSSで書いてます。

.loopSlide{
    display: flex;
    width: 100vw;
    height: 200px;
    overflow: hidden;

    img {
        width: auto;
        height: 100%;
    }
}

アニメーションの作成

@keyframesでCSSアニメーションをそれぞれ設定します。

横移動をさせるので、tranformプロパティのtranslateXの数値を入力していきます。

下記のコードの「slide1」は1枚目の画像を動かすためのモノ。「slide2」は2枚目の画像を動かすためのモノとなっています。

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

アニメーションを指定

作製したアニメーションを<img>に指定します。最初の画像と2枚目の画像でそれぞれ違うアニメーションを適用させましょう。

それでは先ほどのCSSのimgの箇所にanimationプロパティを追記していきましょう。

最終的なCSSは下記になります。

.loopSlide {
    display: flex;
    width: 100vw;
    height: 200px;
    overflow: hidden;

    img {
        width: auto;
        height: 100%;

        &:first-child {
            animation: slide1 60s -30s linear infinite;
        }
        &:last-child {
            animation: slide2 60s linear infinite;
        }
    }
}

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

animation-durationはスライドの時間です。多くすればその分スライドの速度をゆっくりにすることができます。それぞれのアニメーションで同じ数値にしないとずれるので注意。

また、最初のスライドのみanimation-delayにマイナスの数値を入れて、最初だけアニメーション再生位置を途中からにしています。

これを入れないと、何も表示されていない所から画像が入ってくるので空白の時間が生まれてしまいます。

MEMO

animation-delayの数値はanimation-durationの半分の数値をマイナス値で入れましょう。

画像1枚を使った無限スライドはこれで完成です！

See the Pen 無限スライド 1枚画像 by design-levelup (@marurain) on CodePen.

複数要素から作る方法

最初に作成したのは、横に長い画像をスライドさせましたが、ギャラリーなど画像をひとつのアイテムとして扱いたいときの方法をご紹介します。

HTML

画像一枚の場合、<img>をdivで括るだけでしたが、今回は画像を一つずつのアイテムとしたいのでliタグで括りました。さらにリンクも設定したいので、aタグで括りました。

スライドの原理はさっきと同じなので、さっきimgタグだった場所がulに置き換わったというイメージです。

<div class="loopSlide">
  <ul>
    <li><a href="#"><img src="画像URL" alt="">チャーハン</a></li>
    <li><a href="#"><img src="画像URL" alt="">サラダ</a></li>
    <li><a href="#"><img src="画像URL" alt="">クレープ</a></li>
    <li><a href="#"><img src="画像URL" alt="">サンドイッチ</a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="画像URLg" alt="">チャーハン</a></li>
    <li><a href="#"><img src="画像URL" alt="">サラダ</a></li>
    <li><a href="#"><img src="画像URL" alt="">クレープ</a></li>
    <li><a href="#"><img src="画像URL" alt="">サンドイッチ</a></li>
  </ul>
</div>

CSS

続いてCSSです。パーツが増えた分、装飾のCSSの記述が多くなりましたが、アニメーション自体は何もいじっていません。

.loopSlide {
    position: relative;
    display: flex;
    width: 100vw;
    overflow: hidden;

    ul {
        padding: 0;
        width: 100vw;
        display: flex;
        flex-shrink: 0;

        &:first-child {
            animation: slide1 60s -30s linear infinite;
        }
        &:last-child {
            animation: slide2 60s linear infinite;
        }

        li {
            display: inline-block;
            width: 100%;
            min-width: 150px;
            margin-right: 20px;
            list-style: none;
            text-align: center;

            img {
                display: block;
                width: 100%;
                height: auto;
            }
        }
    }
    
   &:hover {
        ul {
            animation-play-state: paused;
        }
    }
}

@keyframes slide1 {
    0% {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes slide2 {
    0% {
        transform: translateX(0);
    }

    to {
        transform: translateX(-200%);
    }
}

MEMO

loopSlideのクラスにカーソルを重ねたら、スライドが止まるようにしたいのでloopaSlideのhover時のulにanimation-play-state: paused;としています。

これで完成です！

やや複雑なので、下記のコードペンを参考に色々いじってみてください。

See the Pen 無限スライド　複数アイテム by design-levelup (@marurain) on CodePen.