[コピペでOK!]CSSのみで作るカルーセルスライダー[2〜8枚サンプル]

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

CSSのみでレスポンシブ対応のカルーセルスライダーを作ってみました。*画像2～8枚のサンプルを記載した記事を公開しました。目指したものCSSのみで作るオートループするカルーセルスライダー画像数を変更可能...

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

使い方
2枚
3枚
4枚
5枚
6枚
7枚
8枚

使い方

以下の一覧から画像枚数にあったCSS、HTMLをコピペします。
その後、HTMLを編集し画像の指定を行います。

  <div class="css-carousel-slider2">
      <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><!-- (*1)と同じ画像 -->
          <div class="slide"><img src="img2" alt=""></div>
      </div>
  </div>

「img src=””」の部分に表示したい画像を記載します。
クラス「slide-wrap-main」はスライドの1枚目の画像、
クラス「slide-wrap」はスライドされる全ての画像を記載します。（1枚目を含む）

2枚

CSS

/* 全体設定 */
.css-carousel-slider2 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider2 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider2 .slide-wrap {
    width: 200%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider2 10s infinite;
    animation-delay: 2s;
}
.css-carousel-slider2 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main2 10s infinite;
    animation-delay: 2s;
}
.css-carousel-slider2 .slide {
    width: 100%;
}

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

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

    90% { transform: translateX(calc(2 / 2 * -100%)); }
    100% { transform: translateX(calc(2 / 2 * -100%)); }
}

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

HTML

<div class="css-carousel-slider2">
    <div class="slide-wrap-main">
        <div class="slide"><img src="img1" alt=""></div>
    </div>
    <div class="slide-wrap">
        <div class="slide"><img src="img1" alt=""></div>
        <div class="slide"><img src="img2" alt=""></div>
    </div>
</div>

3枚

CSS

/* 全体設定 */
.css-carousel-slider3 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider3 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider3 .slide-wrap {
    width: 300%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider3 15s infinite;
    animation-delay: 2s;
}
.css-carousel-slider3 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main3 15s infinite;
    animation-delay: 2s;
}
.css-carousel-slider3 .slide {
    width: 100%;
}

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

    27.3% { transform: translateX(calc(1 / 3 * -100%)); }
    33.3% { transform: translateX(calc(1 / 3 * -100%)); }

    60.6% { transform: translateX(calc(2 / 3 * -100%)); }
    66.6% { transform: translateX(calc(2 / 3 * -100%)); }

    94% { transform: translateX(calc(3 / 3 * -100%)); }
    100% { transform: translateX(calc(3 / 3 * -100%)); }
}

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

HTML

<div class="css-carousel-slider3">
    <div class="slide-wrap-main">
        <div class="slide"><img src="img1" alt=""></div>
    </div>
    <div class="slide-wrap">
        <div class="slide"><img src="img1" alt=""></div>
        <div class="slide"><img src="img2" alt=""></div>
        <div class="slide"><img src="img3" alt=""></div>
    </div>
</div>

4枚

CSS

/* 全体設定 */
.css-carousel-slider4 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider4 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider4 .slide-wrap {
    width: 400%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider4 20s infinite;
    animation-delay: 2s;
}
.css-carousel-slider4 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main4 20s infinite;
    animation-delay: 2s;
}
.css-carousel-slider4 .slide {
    width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider4 {
    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-main4 {
    0% { transform: translateX(100%); }
    75% { transform: translateX(100%); }
    95% { transform: translateX(0%);}
}

HTML

<div class="css-carousel-slider4">
    <div class="slide-wrap-main">
        <div class="slide"><img src="img1" alt=""></div>
    </div>
    <div class="slide-wrap">
        <div class="slide"><img src="img1" alt=""></div>
        <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>

5枚

CSS

/* 全体設定 */
.css-carousel-slider5 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider5 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider5 .slide-wrap {
    width: 500%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider5 25s infinite;
    animation-delay: 2s;
}
.css-carousel-slider5 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main5 25s infinite;
    animation-delay: 2s;
}
.css-carousel-slider5 .slide {
    width: 100%;
}

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

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

    36% { transform: translateX(calc(2 / 5 * -100%)); }
    40% { transform: translateX(calc(2 / 5 * -100%)); }

    56% { transform: translateX(calc(3 / 5 * -100%)); }
    60% { transform: translateX(calc(3 / 5 * -100%)); }

    76% { transform: translateX(calc(4 / 5 * -100%)); }
    80% { transform: translateX(calc(4 / 5 * -100%)); }

    96% { transform: translateX(calc(5 / 5 * -100%)); }
    100% { transform: translateX(calc(5 / 5 * -100%)); }
}

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

HTML

<div class="css-carousel-slider5">
    <div class="slide-wrap-main">
        <div class="slide"><img src="img1" alt=""></div>
    </div>
    <div class="slide-wrap">
        <div class="slide"><img src="img1" alt=""></div>
        <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 class="slide"><img src="img5" alt=""></div>
    </div>
</div>

6枚

CSS

/* 全体設定 */
.css-carousel-slider6 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider6 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider6 .slide-wrap {
    width: 600%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider6 30s infinite;
    animation-delay: 2s;
}
.css-carousel-slider6 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main6 30s infinite;
    animation-delay: 2s;
}
.css-carousel-slider6 .slide {
    width: 100%;
}

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

    13.6% { transform: translateX(calc(1 / 6 * -100%)); }
    16.6% { transform: translateX(calc(1 / 6 * -100%)); }

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

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

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

    80.3% { transform: translateX(calc(5 / 6 * -100%)); }
    83.3% { transform: translateX(calc(5 / 6 * -100%)); }

    97% { transform: translateX(calc(6 / 6 * -100%)); }
    100% { transform: translateX(calc(6 / 6 * -100%)); }
}

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

HTML

<div class="css-carousel-slider6">
    <div class="slide-wrap-main">
        <div class="slide"><img src="img1" alt=""></div>
    </div>
    <div class="slide-wrap">
        <div class="slide"><img src="img1" alt=""></div>
        <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 class="slide"><img src="img5" alt=""></div>
        <div class="slide"><img src="img6" alt=""></div>
    </div>
</div>

7枚

CSS

/* 全体設定 */
.css-carousel-slider7 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider7 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider7 .slide-wrap {
    width: 700%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider7 35s infinite;
    animation-delay: 2s;
}
.css-carousel-slider7 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main7 35s infinite;
    animation-delay: 2s;
}
.css-carousel-slider7 .slide {
    width: 100%;
}

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

    11.8% { transform: translateX(calc(1 / 7 * -100%)); }
    14.3% { transform: translateX(calc(1 / 7 * -100%)); }

    26.1% { transform: translateX(calc(2 / 7 * -100%)); }
    28.6% { transform: translateX(calc(2 / 7 * -100%)); }

    40.4% { transform: translateX(calc(3 / 7 * -100%)); }
    42.9% { transform: translateX(calc(3 / 7 * -100%)); }

    54.7% { transform: translateX(calc(4 / 7 * -100%)); }
    57.2% { transform: translateX(calc(4 / 7 * -100%)); }

    69% { transform: translateX(calc(5 / 7 * -100%)); }
    71.5% { transform: translateX(calc(5 / 7 * -100%)); }

    83.3% { transform: translateX(calc(6 / 7 * -100%)); }
    85.8% { transform: translateX(calc(6 / 7 * -100%)); }

    97.5% { transform: translateX(calc(7 / 7 * -100%)); }
    100% { transform: translateX(calc(7 / 7 * -100%)); }
}

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

HTML

<div class="css-carousel-slider7">
    <div class="slide-wrap-main">
        <div class="slide"><img src="img1" alt=""></div>
    </div>
    <div class="slide-wrap">
        <div class="slide"><img src="img1" alt=""></div>
        <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 class="slide"><img src="img5" alt=""></div>
        <div class="slide"><img src="img6" alt=""></div>
        <div class="slide"><img src="img7" alt=""></div>
    </div>
</div>

8枚

CSS

/* 全体設定 */
.css-carousel-slider8 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider8 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider8 .slide-wrap {
    width: 800%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider8 40s infinite;
    animation-delay: 2s;
}
.css-carousel-slider8 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main8 40s infinite;
    animation-delay: 2s;
}
.css-carousel-slider8 .slide {
    width: 100%;
}

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

    10.5% { transform: translateX(calc(1 / 8 * -100%)); }
    12.5% { transform: translateX(calc(1 / 8 * -100%)); }

    23% { transform: translateX(calc(2 / 8 * -100%)); }
    25% { transform: translateX(calc(2 / 8 * -100%)); }

    35.5% { transform: translateX(calc(3 / 8 * -100%)); }
    37.5% { transform: translateX(calc(3 / 8 * -100%)); }

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

    60.5% { transform: translateX(calc(5 / 8 * -100%)); }
    62.5% { transform: translateX(calc(5 / 8 * -100%)); }

    73% { transform: translateX(calc(6 / 8 * -100%)); }
    75% { transform: translateX(calc(6 / 8 * -100%)); }

    85.5% { transform: translateX(calc(7 / 8 * -100%)); }
    87.5% { transform: translateX(calc(7 / 8 * -100%)); }

    98% { transform: translateX(calc(8 / 8 * -100%)); }
    100% { transform: translateX(calc(8 / 8 * -100%)); }
}

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

HTML

<div class="css-carousel-slider8">
    <div class="slide-wrap-main">
        <div class="slide"><img src="img1" alt=""></div>
    </div>
    <div class="slide-wrap">
        <div class="slide"><img src="img1" alt=""></div>
        <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 class="slide"><img src="img5" alt=""></div>
        <div class="slide"><img src="img6" alt=""></div>
        <div class="slide"><img src="img7" alt=""></div>
        <div class="slide"><img src="img8" alt=""></div>
    </div>
</div>