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

infinite_loop_slider



当記事では、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%) }
}


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

slide_image1 slide_image2 slide_image3 slide_image4 slide_image1 slide_image2 slide_image3 slide_image4






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

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

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


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

slide_image1 slide_image2 slide_image3 slide_image4 slide_image1 slide_image2 slide_image3 slide_image4






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

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

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


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

slide_image1 slide_image2 slide_image3 slide_image4 slide_image1 slide_image2 slide_image3 slide_image4






⑤流れを逆向きにする

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

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


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

slide_image1 slide_image2 slide_image3 slide_image4 slide_image1 slide_image2 slide_image3 slide_image4






ソースコード全文

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

<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);      /* 追加 */
}


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

slide_image1 slide_image2 slide_image3 slide_image4 slide_image1 slide_image2 slide_image3 slide_image4





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

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


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

slide_image1 slide_image2 slide_image3 slide_image4 slide_image1 slide_image2 slide_image3 slide_image4




ただ、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側から表示枚数を変更できるようになりました!

slide_image1 slide_image2 slide_image3 slide_image4 slide_image1 slide_image2 slide_image3 slide_image4







発展:ソースコード全文

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

<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のみで実現できるものがありますので、ぜひ試してみてください!





以上、自動で流れ続ける無限ループスライダーをCSSで作成する方法でした。

スポンサーリンク

You can subscribe by SNS

スポンサーリンク

コメントを残す

*