JavaScriptで作成スライドショーとスライダー

Contents

風景がフェードインするスライドショー

JavaScriptで設定した画像を、フェードイン・フェードアウトしながら切り替えるシンプルなスライドショーを作成します。

See the Pen Untitled by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

HTML

    <h1 style="text-align: center;">風景スライドショー</h1>
    <div class="slideshow"></div>

CSS

        .slideshow {
            width: 1200px;
            height: 600px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }

        .slideshow img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .slideshow img.active {
            opacity: 1;
        }

JavaScript

画像はLorem Picsumを使っています。

        //Picsum Photos
        const images = [
            "https://picsum.photos/id/1018/1200/600",
            "https://picsum.photos/id/1015/1200/600",
            "https://picsum.photos/id/1016/1200/600",
            "https://picsum.photos/id/1020/1200/600",
            "https://picsum.photos/id/1036/1200/600"
        ];
        const slideshow = document.querySelector('.slideshow');

        images.forEach((src, index) => {
            const img = document.createElement('img');
            img.src = src;
            img.alt = `風景${index + 1}`;
            if (index === 0) img.classList.add('active');
            slideshow.appendChild(img);
        });

        let currentIndex = 0;

        const changeImage = () => {
            const slides = document.querySelectorAll('.slideshow img');
            slides[currentIndex].classList.remove('active');
            currentIndex = (currentIndex + 1) % images.length;
            slides[currentIndex].classList.add('active');
        };

        setInterval(() => {
            changeImage();
        }, 3000);

images 配列には表示したい風景画像（Picsum）のURLを用意します。
JavaScriptで img 要素を1枚ずつ作成して、HTML内の .slideshow に追加します。
最初の画像だけ .active クラスをつけて表示。
changeImage() 関数で現在の画像を非表示にし、次の画像に切り替えます。
setInterval により、3秒ごとに画像が自動で切り替わるようになります。
画像ID一覧はこちらで確認できます：https://picsum.photos/images

横方向にスライドする

画像を横に並べて、JavaScriptで translateX() を使い、スライド移動で表示を切り替えます。
5枚目の後に自然に1枚目へ戻る演出をクローン画像で実現します。

See the Pen 横スライド（ループ） by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

HTML

    <h1 style="text-align: center;">横スライド</h1>
    <div class="slideshow">
        <div class="slide-wrapper" id="slideWrapper"></div>
    </div>

CSS

        .slideshow {
            width: 1200px;
            height: 600px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }

        .slide-wrapper {
            display: flex;
            transition: transform 1s ease;
        }

        .slide-wrapper img {
            width: 1200px;
            height: 600px;
            object-fit: cover;
            flex-shrink: 0;
        }

JavaScript

     // 画像配列
        const images = [
            "https://picsum.photos/id/1018/1200/600",
            "https://picsum.photos/id/1015/1200/600",
            "https://picsum.photos/id/1016/1200/600",
            "https://picsum.photos/id/1020/1200/600",
            "https://picsum.photos/id/1036/1200/600"
        ];

        const slideWrapper = document.getElementById('slideWrapper');

        // 元画像を追加
        images.forEach((src, index) => {
            const img = document.createElement('img');
            img.src = src;
            img.alt = `スライド${index + 1}`;
            slideWrapper.appendChild(img);
        });

        // 最初の画像のクローンを末尾に追加（ループ演出用）
        const clone = document.createElement('img');
        clone.src = images[0];
        clone.alt = "クローン画像";
        slideWrapper.appendChild(clone);

        const totalSlides = images.length + 1; // クローン含め6枚
        let currentIndex = 0;

        const slideWidth = 1200;

        const changeSlide = () => {
            currentIndex++;
            slideWrapper.style.transition = 'transform 1s ease';
            slideWrapper.style.transform = `translateX(-${slideWidth * currentIndex}px)`;

            // クローンに来たらアニメーション後に即リセット
            if (currentIndex === images.length) {
                setTimeout(() => {
                    slideWrapper.style.transition = 'none'; // アニメーションを無効に
                    slideWrapper.style.transform = `translateX(0px)`;
                    currentIndex = 0;
                }, 1000); // 1秒後（CSSの transition に合わせる）
            }
        };

        // 初期スタイル設定
        slideWrapper.style.width = `${slideWidth * totalSlides}px`;

        // 3秒ごとにスライド
        setInterval(changeSlide, 3000);

画像を横に並べ、スライドで表示を切り替える。
最後に最初の画像のクローンを追加し、自然にループ。
setTimeout で滑らかに1枚目に戻る演出。
transition: none でアニメーションを一時的に無効化して即移動。