[CSSのみ]オートループするカルーセルスライダー

2021.07.13

CSSのみでレスポンシブ対応のカルーセルスライダーを作ってみました。

*画像2～8枚のサンプルを記載した記事を公開しました。

[コピペでOK!]CSSのみで作るカルーセルスライダー[2〜8枚サンプル]
CSSのみで動くカルーセルスライダーをコピペで使える様、画像枚数2〜8枚で使えるコードを用意しました！前回の記事「オートループするカルーセルスライダー」は以下の記事からどうぞ。 使い...
mirailog.jp
2021.10.02

目指したもの

  • CSSのみで作るオートループするカルーセルスライダー
  • 画像数を変更可能
  • レスポンシブ対応やサイズ設定が可能
  • マウス操作、タッチ操作やナビゲーションは無し

使用デモ

実装手順

  • 以下のHTMLとCSSを編集して使用してください。
  • スライドが4枚の場合CSSはそのままで利用できますが、4枚以外の場合にはCSSの編集も必要です。
  • スライドの高さは1枚目の画像（Class「slide-wrap-main」に設定した画像）に合わせられます。

コードの利用は自己責任でお願いします。

HTML

<div class="css-carousel-slider">
    <div class="slide-wrap-main">
        <div class="slide"><img src="img1" alt=""></div><!-- 最初に表示される画像(*1) -->
    </div>
    <div class="slide-wrap">
        <div class="slide"><img src="img1" alt=""></div><!-- スライド画像(*2) -->
        <div class="slide"><img src="img2" alt=""></div>
        <div class="slide"><img src="img3" alt=""></div>
        <div class="slide"><img src="img4" alt=""></div>
    </div>
</div>
  1. 最初から表示されている画像（スライダー1枚目の画像）を設定
  2. 各種スライド画像を設定（1枚目の画像は*1と重複して設定）

CSS

/* 全体設定 */
.css-carousel-slider {
    width: 100%;
    /* max-width: 800px */ /* サイズ設定をする場合はここ(*1) */
    overflow: hidden;
    position: relative;
}
.css-carousel-slider img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider .slide-wrap {
    width: 400%; /* 画像の合計数*100%を設定(*2) */
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider 20s infinite; /* スライダーアニメーション全体の時間(*3) */
    animation-delay: 2s; /* スライダーが始まるまでの時間(*4) */
}
.css-carousel-slider .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main 20s infinite; /* (*3)と同じ内容を設定 */
    animation-delay: 2s; /* (*4)と同じ内容を設定 */
}
.css-carousel-slider .slide {
    width: 100%;
}

/* スライダーアニメーションの設定(*5) */
@keyframes css-carousel-slider {
    0% { transform: translateX(0); }

    20% { transform: translateX(calc(1 / 4 * -100%)); }
    25% { transform: translateX(calc(1 / 4 * -100%)); }

    45% { transform: translateX(calc(2 / 4 * -100%)); }
    50% { transform: translateX(calc(2 / 4 * -100%)); }

    70% { transform: translateX(calc(3 / 4 * -100%)); }
    75% { transform: translateX(calc(3 / 4 * -100%)); }

    95% { transform: translateX(calc(4 / 4 * -100%)); }
    100% { transform: translateX(calc(4 / 4 * -100%)); }
}

@keyframes css-carousel-slider-main {
    0% { transform: translateX(100%); }
    75% { transform: translateX(100%); }
    95% { transform: translateX(0%);}
}
  1. スライダー全体の幅を設定したい場合「max-width」で設定
  2. 画像数×100%の値を設定
  3. スライダーアニメーション全体の時間を設定
  4. 一番最初のスライドが始まるまでの時間を設定
  5. 以下「スライダーアニメーションの設定」で詳しく説明

スライダーアニメーションの設定

画像数を変更する場合にはスライダーアニメーションの変更が必要です。
少し複雑な内容になり、説明も上手くないと思うので例を見る方がわかりやすいかもしれません。

まず、@keyframes css-carousel-slider内に以下のコードを画像数分だけ用意してください。

❹% { transform: translateX(calc(❶ / ❷ * -100%)); }
❸% { transform: translateX(calc(❶ / ❷ * -100%)); }
❶画像の何枚目か
❷画像の合計数
❸100/合計画像数×❶（小数点は切り捨ててもOK。最後は100%にする。）
❹❸より小さい数字を適宜設定
（❸〜❹がスライドの繋ぎ時間となるため、離れた数字を設定するほどスライドの停止時間が長くなる）

次に、@keyframes css-carousel-slider-main内に以下のコードを1つ入力してください。

0% { transform: translateX(100%); }
❺% { transform: translateX(100%); }
❻% { transform: translateX(0%); }
❺❸の中で2番目に高い数字
❻❹の中で1番高い数字

以下、画像を6枚に変更した場合の例

@keyframes css-carousel-slider {
    0% { transform: translateX(0); }

    14.6% { transform: translateX(calc(1 / 6 * -100%)); } /* 下より-2%とした */
    16.6% { transform: translateX(calc(1 / 6 * -100%)); } /* 100/6を設定 */

    31.2% { transform: translateX(calc(2 / 6 * -100%)); }
    33.2% { transform: translateX(calc(2 / 6 * -100%)); }

    47.8% { transform: translateX(calc(3 / 6 * -100%)); }
    49.8% { transform: translateX(calc(3 / 6 * -100%)); }

    64.4% { transform: translateX(calc(4 / 6 * -100%)); }
    66.4% { transform: translateX(calc(4 /　6 * -100%)); }

    81% { transform: translateX(calc(5 / 6 * -100%)); }
    83% { transform: translateX(calc(5 / 6 * -100%)); } /* ❸の中で2番目に高い数字 */

    98% { transform: translateX(calc(6 / 6 * -100%)); } /* ❹の中で1番高い数字 */
    100% { transform: translateX(calc(6 / 6 * -100%)); }
}

@keyframes css-carousel-slider-main {
    0% { transform: translateX(100%); }
    83% { transform: translateX(100%); } /* ❸の中で2番目に高い数字を設定 */
    98% { transform: translateX(0%); } /* ❹の中で1番高い数字を設定 */
}

まとめ

以上で完成です。

*画像が2～8枚のサンプルを記載した記事も公開しました。

[コピペでOK!]CSSのみで作るカルーセルスライダー[2〜8枚サンプル]
CSSのみで動くカルーセルスライダーをコピペで使える様、画像枚数2〜8枚で使えるコードを用意しました！前回の記事「オートループするカルーセルスライダー」は以下の記事からどうぞ。 使い...
mirailog.jp
2021.10.02

IEに対応する場合

IEでは「keyframes」の中でcalcを使えないために、動作しません。
対応させる場合には、以下の様に「keyframes」内のcalcを計算済みの数値に変更してください。

@keyframes css-simple-slider {
    0% { transform: translateX(0); }

    20% { transform: translateX(-25%); }
    25% { transform: translateX(-25%); }

    45% { transform: translateX(-50%); }
    50% { transform: translateX(-50%); }

    70% { transform: translateX(-75%); }
    75% { transform: translateX(-75%); }

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

編集を行いやすい様にcalcを利用しているだけので、IE対応しない場合でも上記の方が記述はスッキリします。

タイトルとURLをコピーしました