【CSS】自動で流れ続ける無限ループスライダーを作成する

当記事では、CSSのみで自動で流れ続ける無限ループスライダーを作成する方法を記します。

①スライド要素を用意
②スライドアニメーションを付与
③スライドスピードを変更する
④ホバー時にスライドを一時停止する
⑤流れを逆向きにする
ソースコード全文
発展：表示するスライドの枚数を変更する
発展：ソースコード全文

①スライド要素を用意

HTMLでスライド要素を用意します。
下記のようにスライドを2セット用意するようにしてください。(ここでは4枚×2セット)

<div class="loop-slide">
    <div>
        <img src="./img/sample1.png">
        <img src="./img/sample2.png">
        <img src="./img/sample3.png">
        <img src="./img/sample4.png">
        <img src="./img/sample1.png">
        <img src="./img/sample2.png">
        <img src="./img/sample3.png">
        <img src="./img/sample4.png">
    </div>
</div>

②スライドアニメーションを付与

CSSはこれだけでOKです。
9行目のmin-widthプロパティは、calc(100% / スライド枚数)となるようにしてください。

.loop-slide {
    overflow: hidden;
}
.loop-slide > div {
    display: flex;
    animation: slide-to-left 1s linear infinite;
}
.loop-slide > div > * {
    min-width: calc(100% / 4);
}
@keyframes slide-to-left {
    100% { transform: translateX(-100%) }
}

無限ループスライダーができました。

③スライドスピードを変更する

animationプロパティの数字の部分でスライドスピードを指定する事ができます。
今は1秒になってるので、5秒に変更してみましょう。

.loop-slide > div {
    display: flex;
    /* animation: slide-to-left 1s linear infinite; */  /* 削除 */
    animation: slide-to-left 5s linear infinite;        /* 追加 */
}

スライドスピードを変更できました。

④ホバー時にスライドを一時停止する

下記のCSSを追加する事で、ホバー時にスライドが一時停止するようになります。

.loop-slide > div:hover{
    animation-play-state: paused;
}

ホバーすると一時停止すると思うので、試してみてください。

⑤流れを逆向きにする

下記のようにanimationプロパティにreverseを追加する事で、スライドの流れを逆向きにすることができます。

.loop-slide > div {
    display: flex;
    /* animation: slide-to-left 5s linear infinite; */      /* 削除 */
    animation: slide-to-left 5s linear infinite reverse;    /* 追加 */
}

流れが逆向きになりました。

ソースコード全文

ここまでのソースコード全文を、一旦載せておきます。
※一番最後に表示枚数を変更する発展系についても記載してますので、興味ある方は読んでみてください。

<style>
    .loop-slide {
        overflow: hidden;
    }
    .loop-slide > div:hover{
        animation-play-state: paused;
    }
    .loop-slide > div {
        display: flex;
        animation: slide-to-left 5s linear infinite reverse;
    }
    .loop-slide > div > * {
        min-width: calc(100% / 4);
    }
    @keyframes slide-to-left {
        100% { transform: translateX(-100%) }
    }
</style>

<div class="loop-slide">
    <div>
        <img src="./img/sample1.png">
        <img src="./img/sample2.png">
        <img src="./img/sample3.png">
        <img src="./img/sample4.png">
        <img src="./img/sample1.png">
        <img src="./img/sample2.png">
        <img src="./img/sample3.png">
        <img src="./img/sample4.png">
    </div>
</div>

発展：表示するスライドの枚数を変更する

実は上記の方法では、表示するスライドの枚数を変更することができません。
例えば、下記のように表示するスライド枚数を2枚に変更するとどうなるか見てみましょう。

.loop-slide > div > * {
    /*min-width: calc(100% / 4);*/  /* 削除 */
    min-width: calc(100% / 2);      /* 追加 */
}

これは、うまく動きません。
しばらく眺めていると、途中でアニメーションがリセットされてしまうのが確認できると思います。

4枚すべて流れ終わったらリセットされてほしいのに、2枚目でリセットされてしまっています。
なのでスライドの移動距離を伸ばしてあげましょう。
translateX関数の引数は、calc(-100% * (実際のスライド数 / 表示スライド数))となるようにします。

@keyframes slide-to-left {
    100% { transform: translateX(calc(-100% * (4 / 2))) }
}

途中でリセットされることなく動くようになりました！

ただ、CSSに数字べた書きでは使いにくいので、カスタムプロパティを利用してHTMLから値を渡せるようにしてみましょう。

.loop-slide > div > * {
    /* min-width: calc(100% / 2); */            /* 削除 */
    min-width: calc(100% / var(--slideToShow)); /* 追加 */
}
@keyframes slide-to-left {
    /* 100% { transform: translateX(calc(-100% * (4 / 2))) } */                             /* 削除 */
    100% { transform: translateX(calc(-100% * (var(--slideNum) / var(--slideToShow)))) }    /* 追加 */
}

<!-- <div class="loop-slide"> -->                               <!-- 削除 -->
<div class="loop-slide" style="--slideToShow:2; --slideNum:4;"> <!-- 追記 -->

問題なく動いてることが確認できると思います。
これでHTML側から表示枚数を変更できるようになりました！

発展：ソースコード全文

最後に発展系のソースコード全文を載せておきます。

<style>
    .loop-slide {
        overflow: hidden;
    }
    .loop-slide > div:hover{
        animation-play-state: paused;
    }
    .loop-slide > div {
        display: flex;
        animation: slide-to-left 5s linear infinite reverse;
    }
    .loop-slide > div > * {
        min-width: calc(100% / var(--slideToShow));
    }
    @keyframes slide-to-left {
        100% { transform: translateX(calc(-100% * (var(--slideNum) / var(--slideToShow)))) }
    }
</style>

<div class="loop-slide" style="--slideToShow:2; --slideNum:4;">
    <div>
        <img src="./img/sample1.png">
        <img src="./img/sample2.png">
        <img src="./img/sample3.png">
        <img src="./img/sample4.png">
        <img src="./img/sample1.png">
        <img src="./img/sample2.png">
        <img src="./img/sample3.png">
        <img src="./img/sample4.png">
    </div>
</div>

今回のようにCSSのみで出来ることはなるべくCSSで実現したいものですね。
他にもCSSのみで実現できるものがありますので、ぜひ試してみてください！