JavaScript02 自作スライドショーで動きの基礎を段階的に学ぶ(入門編）

HTMLの解説

スライダーなので、前へ　次へ　ボタンも実装してみます。HTMLを下記のように変更します。

 <div class="slideshow">
        <div class="slides"></div>
        <button class="prev">前へ</button>
        <button class="next">次へ</button>
</div>

CSSの解説

        .slideshow {
            width: 800px;
            height: 400px;
            overflow: hidden;
            position: relative;
            border: 2px solid #000;
        }

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

        .slides img {
            width: 800px;
            height: 400px;
            object-fit: cover;
        }

        .prev,
        .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }

JavaScript全体のコード

        // 画像のURLを配列で用意
        const images = [
            "https://placehold.jp/410042/ffffff/800x400.jpg?text=slide01",
            "https://placehold.jp/ffcb5c/ffffff/800x400.jpg?text=slide02",
            "https://placehold.jp/4991ee/ffffff/800x400.jpg?text=slide03"
        ];

        const slidesContainer = document.querySelector('.slides');

        // **ダミー画像を含むスライド要素を作成**
        const createSlideElements = () => {
            // ダミーとして最後の画像を最初に追加
            const firstDummy = document.createElement('img');
            firstDummy.src = images[images.length - 1]; // 最後の画像
            slidesContainer.appendChild(firstDummy);

            // 実際の画像を追加
            images.forEach(src => {
                const img = document.createElement('img');
                img.src = src;
                slidesContainer.appendChild(img);
            });

            // ダミーとして最初の画像を最後に追加
            const lastDummy = document.createElement('img');
            lastDummy.src = images[0]; // 最初の画像
            slidesContainer.appendChild(lastDummy);
        };

        // スライドのセットアップ
        createSlideElements();

        const slideImages = document.querySelectorAll('.slides img');
        let currentIndex = 1; // **実際のスライド開始位置（1枚目の画像）**
        const slideWidth = 800;
        let autoSlide;

        // **スライドを移動する関数**
        const moveSlide = (index) => {
            slidesContainer.style.transition = 'transform 0.5s ease-in-out';
            currentIndex = index;
            slidesContainer.style.transform = `translateX(${-slideWidth * currentIndex}px)`;
        };

        // **transitionend で瞬時にリセットする関数**
        const resetPosition = () => {
            if (currentIndex === 0) {
                // 先頭ダミーに来たら、本当の最後に瞬時に移動
                slidesContainer.style.transition = 'none';
                currentIndex = images.length;
                slidesContainer.style.transform = `translateX(${-slideWidth * currentIndex}px)`;
            } else if (currentIndex === images.length + 1) {
                // 末尾ダミーに来たら、本当の最初に瞬時に移動
                slidesContainer.style.transition = 'none';
                currentIndex = 1;
                slidesContainer.style.transform = `translateX(${-slideWidth * currentIndex}px)`;
            }
        };

        // **自動スライド開始**
        const startAutoPlay = () => {
            autoSlide = setInterval(() => {
                moveSlide(currentIndex + 1);
            }, 3000);
        };

        // **オートスライド停止**
        const stopAutoPlay = () => clearInterval(autoSlide);

        // **オートスライド再開**
        const restartAutoPlay = () => {
            stopAutoPlay();
            startAutoPlay();
        };

        // **初期セットアップ**
        const init = () => {
            slidesContainer.style.transform = `translateX(${-slideWidth * currentIndex}px)`;
            startAutoPlay();
        };

        // **イベントリスナー**
        document.querySelector('.next').addEventListener('click', () => {
            moveSlide(currentIndex + 1);
            restartAutoPlay();
        });

        document.querySelector('.prev').addEventListener('click', () => {
            moveSlide(currentIndex - 1);
            restartAutoPlay();
        });

        slidesContainer.addEventListener('transitionend', resetPosition);

        window.addEventListener('load', init);