HTMLとCSSだけでスライダーアニメーション

HTMLとCSSだけで作成できるスライダーアニメーションのコードをいくつか紹介します。JavaScriptを使わずに、CSSのanimationや@keyframesを活用してスライダーを作成する方法です。

1. シンプルな自動スライダー

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple CSS Slider</title>
    <style>
        .slider {
            width: 100%;
            max-width: 600px;
            height: 300px;
            overflow: hidden;
            position: relative;
            margin: auto;
        }

        .slides {
            display: flex;
            width: 400%;
            height: 100%;
            animation: slideAnimation 12s infinite;
        }

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

        @keyframes slideAnimation {
            0% { transform: translateX(0%); }
            25% { transform: translateX(-100%); }
            50% { transform: translateX(-200%); }
            75% { transform: translateX(-300%); }
            100% { transform: translateX(0%); }
        }
    </style>
</head>
<body>

<div class="slider">
    <div class="slides">
        <img src="https://via.placeholder.com/600x300?text=Slide+1" alt="Slide 1">
        <img src="https://via.placeholder.com/600x300?text=Slide+2" alt="Slide 2">
        <img src="https://via.placeholder.com/600x300?text=Slide+3" alt="Slide 3">
        <img src="https://via.placeholder.com/600x300?text=Slide+4" alt="Slide 4">
    </div>
</div>

</body>
</html>

解説

.slider: スライダーのコンテナ要素です。overflow: hidden;を使用して、スライダーの外にある部分が見えないようにしています。
.slides: すべてのスライドを含む要素で、display: flex;を使用して横並びにしています。width: 400%;としているのは、スライドが4枚あるためです。
@keyframes slideAnimation: スライダーのアニメーションを定義するためのCSSルールです。transform: translateXを使って、スライドが左に移動するように設定されています。

2. フェードイン・フェードアウトスライダー

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

次に、フェードイン・フェードアウトアニメーションを使用したスライダーを紹介します。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fade CSS Slider</title>
    <style>
        .slider {
            position: relative;
            width: 100%;
            max-width: 600px;
            height: 300px;
            margin: auto;
            overflow: hidden;
        }

        .slides {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .slides img {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            animation: fadeAnimation 16s infinite;
        }

        .slides img:nth-child(1) {
            animation-delay: 0s;
        }
        .slides img:nth-child(2) {
            animation-delay: 4s;
        }
        .slides img:nth-child(3) {
            animation-delay: 8s;
        }
        .slides img:nth-child(4) {
            animation-delay: 12s;
        }

        @keyframes fadeAnimation {
            0% { opacity: 0; }
            25% { opacity: 1; }
            50% { opacity: 1; }
            75% { opacity: 0; }
            100% { opacity: 0; }
        }
    </style>
</head>
<body>

<div class="slider">
    <div class="slides">
        <img src="https://via.placeholder.com/600x300?text=Slide+1" alt="Slide 1">
        <img src="https://via.placeholder.com/600x300?text=Slide+2" alt="Slide 2">
        <img src="https://via.placeholder.com/600x300?text=Slide+3" alt="Slide 3">
        <img src="https://via.placeholder.com/600x300?text=Slide+4" alt="Slide 4">
    </div>
</div>

</body>
</html>

解説

position: absolute;: スライド画像を重ねるために使用します。
opacity: 0;: すべての画像を最初は非表示にします。
animation-delay: 各スライドの表示タイミングを遅らせるための設定です。
@keyframes fadeAnimation: 各スライドのフェードイン・フェードアウトを設定します。opacity: 1;でスライドが表示され、opacity: 0;で非表示になります。

3. マニュアル操作可能なスライダー

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

次に、スライダーに手動で操作できるナビゲーションボタンを追加します。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manual CSS Slider</title>
    <style>
        .slider {
            width: 100%;
            max-width: 600px;
            position: relative;
            overflow: hidden;
            margin: auto;
        }

        .slides {
            display: flex;
            width: 400%;
            transition: transform 0.5s ease-in-out;
        }

        .slides input {
            display: none;
        }

        .slide {
            width: 100%;
            flex-shrink: 0;
        }

        .nav {
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            bottom: 10px;
        }

        .nav label {
            cursor: pointer;
            background-color: #fff;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            border-radius: 50%;
        }

        #s1:checked ~ .slides {
            transform: translateX(0%);
        }

        #s2:checked ~ .slides {
            transform: translateX(-100%);
        }

        #s3:checked ~ .slides {
            transform: translateX(-200%);
        }

        #s4:checked ~ .slides {
            transform: translateX(-300%);
        }
    </style>
</head>
<body>

<div class="slider">
    <div class="slides">
        <input type="radio" name="r" id="s1" checked>
        <input type="radio" name="r" id="s2">
        <input type="radio" name="r" id="s3">
        <input type="radio" name="r" id="s4">

        <div class="slide"><img src="https://via.placeholder.com/600x300?text=Slide+1" alt="Slide 1"></div>
        <div class="slide"><img src="https://via.placeholder.com/600x300?text=Slide+2" alt="Slide 2"></div>
        <div class="slide"><img src="https://via.placeholder.com/600x300?text=Slide+3" alt="Slide 3"></div>
        <div class="slide"><img src="https://via.placeholder.com/600x300?text=Slide+4" alt="Slide 4"></div>
    </div>

    <div class="nav">
        <label for="s1"></label>
        <label for="s2"></label>
        <label for="s3"></label>
        <label for="s4"></label>
    </div>
</div>

</body>
</html>