コピペで簡単！WordPress＆HTML対応の画像スライダーの作成方法【自動スライド&キャプションあり&プラグイン不要】

2025-04-02

現役フリーランスエンジニアがこんなお悩みを解決します！

WordPressでプラグイン不要の画像スライダーを実装したい
HTMLで画像スライダー/カルーセルを実装したい
コピペで簡単に実装したい
レスポンシブデザインに対応したい

WordPressでも実装できる画像スライダー/カルーセルのサンプルコード

この記事ではキャプションと自動スライド機能付きの画像スライダー（カルーセル）のコードを紹介します。
コピペで簡単に流用でき、Wordpressでもプラグイン無しで使用可能です！

使用する言語はHTML、CSS、JavaScriptです。

うる

画像スライダーって何さ？

HPでよく見るこういうスライダー（カルーセル）です

2024/11/1 画像の表示枚数によってスクロールに不具合が発生するバグを修正しました。

画像の下にキャプションを表示する画像スライダー

キャプション1

キャプション2

キャプション3

キャプション4

キャプション5

キャプション6

サンプルコードを見る

HTML

<div class="my-slider-container"> 
    <button class="my-slider_btn my-slider_btn-prev"><</button> <!-- 左矢印 -->
    <div class="my-slider">
        <div class="my-slider_track">
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+1" alt="画像1">
                <span class="my-slider_caption">キャプション1</span>
            </div>
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+2" alt="画像2">
                <span class="my-slider_caption">キャプション2</span>
            </div>
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+3" alt="画像3">
                <span class="my-slider_caption">キャプション3</span>
            </div>
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+4" alt="画像4">
                <span class="my-slider_caption">キャプション4</span>
            </div>
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+5" alt="画像5">
                <span class="my-slider_caption">キャプション5</span>
            </div>
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+6" alt="画像6">
                <span class="my-slider_caption">キャプション6</span>
            </div>
        </div>
    </div>
    <button class="my-slider_btn my-slider_btn-next">></button> <!-- 右矢印 -->
</div>

<style>
    /* スライダー全体のスタイル */
    .my-slider-container {
        position: relative;
        max-width: 1070px;
        margin: 0 auto;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .my-slider {
        display: flex;
        overflow: hidden;
    }

    .my-slider_track {
        display: flex;
        transition: transform 0.5s ease;
        width: calc(6 * (25% + 20px));
        max-width: 100%;
    }

    .my-slider_item {
        text-align: center;
        flex: 0 0 calc(33.33% - 20px);
        max-width:calc(33.33% - 20px);
        margin: 0 10px;
        position: relative;
    }

    .my-slider_item img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .my-slider_caption {
        font-size: 0.8em;
        opacity: 0.8;
        margin-top: 10px;
        max-width: 100%;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .my-slider_btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 24px;
        z-index: 10;
    }

    .my-slider_btn--prev {
        left: 10px;
    }

    .my-slider_btn--next {
        right: 11.5px;
    }
    /* レスポンシブ対応 */
    @media (max-width: 768px) {
        .my-slider_item {
            flex: 0 0 calc(50% - 20px);
            max-width: none;
        }
    }

    @media (max-width: 480px) {
        .my-slider_item {
            flex: 0 0 calc(100% - 20px);
            max-width: none;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const mySliderTrack = document.querySelector('.my-slider_track');
        const mySlides = document.querySelectorAll('.my-slider_item');
        const myBtnPrev = document.querySelector('.my-slider_btn-prev');
        const myBtnNext = document.querySelector('.my-slider_btn-next');
        let myCurrentSlide = 0;
        const mySlideCount = mySlides.length;
        const slideIntervalTime = 5000; // 5秒ごとにスライド
        let autoScrollInterval;

        // 表示されるスライド数を動的に取得
        function getVisibleSlides() {
            const containerWidth = document.querySelector('.my-slider-container').offsetWidth;
            const slideWidth = mySlides[0].offsetWidth + 20; // スライドの幅 + マージン
            return Math.round(containerWidth / slideWidth); // 四捨五入
        }

        // スライドを更新
        function updateMySlider() {
            const slideWidth = mySlides[0].clientWidth + 20; // スライドの幅 + マージン
            mySliderTrack.style.transform = `translateX(-${myCurrentSlide * slideWidth}px)`;
        }

        // 自動スライド
        function autoScroll() {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide++;
            if (myCurrentSlide >= mySlideCount - visibleSlides + 1) {
                myCurrentSlide = 0; // 最初のスライドに戻る
            }
            updateMySlider();
        }

        // タイマーリセット＆再スタート
        function resetAutoScroll() {
            clearInterval(autoScrollInterval); // タイマーリセット
            autoScrollInterval = setInterval(autoScroll, slideIntervalTime); // タイマー再スタート
        }

        // 矢印をクリックでスライド移動、タイマーリセット
        myBtnNext.addEventListener('click', () => {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide++;
            if (myCurrentSlide >= mySlideCount - visibleSlides + 1) {
                myCurrentSlide = 0; // 最初のスライドに戻る
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        });

        myBtnPrev.addEventListener('click', () => {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide--;
            if (myCurrentSlide < 0) {
                myCurrentSlide = mySlideCount - visibleSlides; // 最後のスライドに戻る
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        });

        // 自動スクロールを開始
        autoScrollInterval = setInterval(autoScroll, slideIntervalTime);

        // ウィンドウのリサイズ時にスライドを更新
        window.addEventListener('resize', updateMySlider);

        // スマホ用のスワイプ操作の実装
        let touchStartX = 0;
        let touchEndX = 0;

        document.querySelector('.my-slider').addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        });

        document.querySelector('.my-slider').addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleGesture();
        });

        function handleGesture() {
            const visibleSlides = getVisibleSlides();
            if (touchEndX < touchStartX) {
                // 右スワイプ
                myCurrentSlide++;
                if (myCurrentSlide >= mySlideCount - visibleSlides + 1) {
                    myCurrentSlide = 0; // 最初のスライドに戻る
                }
            } else if (touchEndX > touchStartX) {
                // 左スワイプ
                myCurrentSlide--;
                if (myCurrentSlide < 0) {
                    myCurrentSlide = mySlideCount - visibleSlides; // 最後のスライドに戻る
                }
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        }
    });
</script>

マウスホバーするとキャプションが表示される画像スライダー

Caption 1

Caption 2

Caption 3

Caption 4

Caption 5

Caption 6

サンプルコードを見る

HTML

<div class="my-slider-container-hover"> 
    <button class="my-slider_btn-hover my-slider_btn-prev-hover"><</button> <!-- 左矢印 -->
    <div class="my-slider-hover">
        <div class="my-slider_track-hover">
            <div class="my-slider_item-hover">
                <img src="https://via.placeholder.com/300x200?text=Image+1" alt="画像1">
                <div class="my-slider_caption-overlay-hover">Caption 1</div>
            </div>
            <div class="my-slider_item-hover">
                <img src="https://via.placeholder.com/300x200?text=Image+2" alt="画像2">
                <div class="my-slider_caption-overlay-hover">Caption 2</div>
            </div>
            <div class="my-slider_item-hover">
                <img src="https://via.placeholder.com/300x200?text=Image+3" alt="画像3">
                <div class="my-slider_caption-overlay-hover">Caption 3</div>
            </div>
            <div class="my-slider_item-hover">
                <img src="https://via.placeholder.com/300x200?text=Image+4" alt="画像4">
                <div class="my-slider_caption-overlay-hover">Caption 4</div>
            </div>
            <div class="my-slider_item-hover">
                <img src="https://via.placeholder.com/300x200?text=Image+5" alt="画像5">
                <div class="my-slider_caption-overlay-hover">Caption 5</div>
            </div>
            <div class="my-slider_item-hover">
                <img src="https://via.placeholder.com/300x200?text=Image+6" alt="画像6">
                <div class="my-slider_caption-overlay-hover">Caption 6</div>
            </div>
        </div>
    </div>
    <button class="my-slider_btn-hover my-slider_btn-next-hover">></button> <!-- 右矢印 -->
</div>

<style>
    /* スライダー全体のスタイル */
    .my-slider-container-hover {
        position: relative;
        max-width: 1070px;
        margin: 0 auto;
        overflow: hidden;
        margin-bottom: 20px; /* 下に余白を追加 */
    }

    .my-slider-hover {
        display: flex;
        overflow: hidden;
    }

    .my-slider_track-hover {
        display: flex;
        transition: transform 0.5s ease;
        width: calc(6 * (25% + 20px)); /* 6つのスライドに合わせた幅 */
        max-width: 100%;
    }

    .my-slider_item-hover {
        text-align: center;
        flex: 0 0 calc(33.33% - 20px); /* 3つの画像がちょうど収まるサイズ */
        max-width: calc(33.33% - 20px); /* 最大幅を設定 */
        margin: 0 10px;
        position: relative; /* キャプションを画像の下部に配置するため */
    }

    .my-slider_item-hover img {
        width: 100%;
        height: 200px;
        object-fit: cover; /* 画像を中央寄せで表示 */
    }

    /* キャプションのスタイル（初期は非表示） */
    .my-slider_caption-overlay-hover {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        padding: 10px;
        color: white;
        font-size: 0.8em;
        background-color: rgba(0, 0, 0, 0.6);
        text-align: center;
        box-sizing: border-box;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    /* ホバーまたはタッチ時にキャプションを表示 */
    .my-slider_item-hover:hover .my-slider_caption-overlay-hover,
    .my-slider_item-hover:active .my-slider_caption-overlay-hover {
        opacity: 1;
        pointer-events: auto;
    }

    .my-slider_btn-hover {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 24px;
        z-index: 10;
    }

    .my-slider_btn-prev-hover {
        left: 10px;
    }

    .my-slider_btn-next-hover {
        right: 11.5px;
    }

    /* レスポンシブデザイン */
    @media (max-width: 768px) {
        .my-slider_item-hover {
            flex: 0 0 calc(50% - 20px); /* 2つ表示 */
            max-width: none;
        }
    }

    @media (max-width: 480px) {
        .my-slider_item-hover {
            flex: 0 0 calc(100% - 20px); /* 1つ表示 */
            max-width: none;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const mySliderTrack = document.querySelector('.my-slider_track-hover');
        const mySlides = document.querySelectorAll('.my-slider_item-hover');
        const myBtnPrev = document.querySelector('.my-slider_btn-prev-hover');
        const myBtnNext = document.querySelector('.my-slider_btn-next-hover');
        let myCurrentSlide = 0;
        const mySlideCount = mySlides.length;
        const slideIntervalTime = 5000; // 5秒ごとにスライド
        let autoScrollInterval;

        // 表示されるスライド数を動的に取得
        function getVisibleSlides() {
            const containerWidth = document.querySelector('.my-slider-container-hover').offsetWidth;
            const slideWidth = mySlides[0].offsetWidth + 20; // スライドの幅 + マージン
            return Math.round(containerWidth / slideWidth); // 四捨五入
        }

        // スライドを更新
        function updateMySlider() {
            const slideWidth = mySlides[0].clientWidth + 20; // スライドの幅 + マージン
            mySliderTrack.style.transform = `translateX(-${myCurrentSlide * slideWidth}px)`;
        }

        // 自動スライド
        function autoScroll() {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide++;
            if (myCurrentSlide >= mySlideCount - visibleSlides + 1) {
                myCurrentSlide = 0; // 最初のスライドに戻る
            }
            updateMySlider();
        }

        // タイマーリセット＆再スタート
        function resetAutoScroll() {
            clearInterval(autoScrollInterval); // タイマーリセット
            autoScrollInterval = setInterval(autoScroll, slideIntervalTime); // タイマー再スタート
        }

        // 矢印をクリックでスライド移動、タイマーリセット
        myBtnNext.addEventListener('click', () => {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide++;
            if (myCurrentSlide >= mySlideCount - visibleSlides + 1) {
                myCurrentSlide = 0; // 最初のスライドに戻る
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        });

        myBtnPrev.addEventListener('click', () => {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide--;
            if (myCurrentSlide < 0) {
                myCurrentSlide = mySlideCount - visibleSlides; // 最後のスライドに戻る
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        });

        // 自動スクロールを開始
        autoScrollInterval = setInterval(autoScroll, slideIntervalTime);

        // ウィンドウのリサイズ時にスライドを更新
        window.addEventListener('resize', updateMySlider);

        // スマホ用のスワイプ操作の実装
        let touchStartX = 0;
        let touchEndX = 0;

        document.querySelector('.my-slider-hover').addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        });

        document.querySelector('.my-slider-hover').addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleGesture();
        });

        function handleGesture() {
            const visibleSlides = getVisibleSlides();
            if (touchEndX < touchStartX) {
                // 右スワイプ
                myCurrentSlide++;
                if (myCurrentSlide >= mySlideCount - visibleSlides + 1) {
                    myCurrentSlide = 0; // 最初のスライドに戻る
                }
            } else if (touchEndX > touchStartX) {
                // 左スワイプ
                myCurrentSlide--;
                if (myCurrentSlide < 0) {
                    myCurrentSlide = mySlideCount - visibleSlides; // 最後のスライドに戻る
                }
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        }
    });
</script>

画像の上にキャプションが表示される画像スライダー

Caption 1

Caption 2

Caption 3

Caption 4

Caption 5

Caption 6

サンプルコードを見る

HTML

<div class="my-slider-container-onimage"> 
    <button class="my-slider_btn-onimage my-slider_btn-prev-onimage"><</button> <!-- 左矢印 -->
    <div class="my-slider-onimage">
        <div class="my-slider_track-onimage">
            <div class="my-slider_item-onimage">
                <img src="https://via.placeholder.com/300x200?text=Image+1" alt="画像1">
                <div class="my-slider_caption-overlay-onimage">Caption 1</div>
            </div>
            <div class="my-slider_item-onimage">
                <img src="https://via.placeholder.com/300x200?text=Image+2" alt="画像2">
                <div class="my-slider_caption-overlay-onimage">Caption 2</div>
            </div>
            <div class="my-slider_item-onimage">
                <img src="https://via.placeholder.com/300x200?text=Image+3" alt="画像3">
                <div class="my-slider_caption-overlay-onimage">Caption 3</div>
            </div>
            <div class="my-slider_item-onimage">
                <img src="https://via.placeholder.com/300x200?text=Image+4" alt="画像4">
                <div class="my-slider_caption-overlay-onimage">Caption 4</div>
            </div>
            <div class="my-slider_item-onimage">
                <img src="https://via.placeholder.com/300x200?text=Image+5" alt="画像5">
                <div class="my-slider_caption-overlay-onimage">Caption 5</div>
            </div>
            <div class="my-slider_item-onimage">
                <img src="https://via.placeholder.com/300x200?text=Image+6" alt="画像6">
                <div class="my-slider_caption-overlay-onimage">Caption 6</div>
            </div>
        </div>
    </div>
    <button class="my-slider_btn-onimage my-slider_btn-next-onimage">></button> <!-- 右矢印 -->
</div>

<style>
    /* スライダー全体のスタイル */
    .my-slider-container-onimage {
        position: relative;
        max-width: 1070px;
        margin: 0 auto;
        overflow: hidden;
        margin-bottom: 20px; /* 下に余白を追加 */
    }

    .my-slider-onimage {
        display: flex;
        overflow: hidden;
    }

    .my-slider_track-onimage {
        display: flex;
        transition: transform 0.5s ease;
        width: calc(6 * (25% + 20px)); /* 6つのスライドに合わせた幅 */
        max-width: 100%;
    }

    .my-slider_item-onimage {
        text-align: center;
        flex: 0 0 calc(33.33% - 20px); /* 3つの画像がちょうど収まるサイズ */
        max-width: calc(33.33% - 20px); /* 最大幅を設定 */
        margin: 0 10px;
        position: relative; /* キャプションを画像の下部に配置するため */
    }

    .my-slider_item-onimage img {
        width: 100%;
        height: 200px;
        object-fit: cover; /* 画像を中央寄せで表示 */
    }

    /* キャプションのスタイル */
    .my-slider_caption-overlay-onimage {
        position: absolute;
        bottom: 10px; /* 画像の下部に配置 */
        left: 0;
        width: 100%;
        padding: 10px;
        color: white;
        font-size: 0.8em; /* 文字サイズ */
        background-color: rgba(0, 0, 0, 0.6); /* 背景色を黒、透明度を60%に設定 */
        text-align: center; /* キャプションを中央揃えにする */
        box-sizing: border-box; /* パディングを含めた幅の計算をする */
    }

    .my-slider_btn-onimage {
        position: absolute;
        top: 50%; /* 基準を中央に設定 */
        transform: translateY(-50%); /* 矢印をスライダーの中央に配置 */
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 24px;
        z-index: 10;
    }

    .my-slider_btn-prev-onimage {
        left: 10px;
    }

    .my-slider_btn-next-onimage {
        right: 11.5px;
    }

    /* レスポンシブデザイン */
    @media (max-width: 768px) {
        .my-slider_item-onimage {
            flex: 0 0 calc(50% - 20px); /* 2つ表示 */
            max-width: none; /* 最大幅を非設定にする */
        }
    }

    @media (max-width: 480px) {
        .my-slider_item-onimage {
            flex: 0 0 calc(100% - 20px); /* 1つ表示 */
            max-width: none; /* 最大幅を非設定にする */
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const mySliderTrack = document.querySelector('.my-slider_track-onimage');
        const mySlides = document.querySelectorAll('.my-slider_item-onimage');
        const myBtnPrev = document.querySelector('.my-slider_btn-prev-onimage');
        const myBtnNext = document.querySelector('.my-slider_btn-next-onimage');
        let myCurrentSlide = 0;
        const mySlideCount = mySlides.length;
        const slideIntervalTime = 5000; // 5秒ごとにスライド
        let autoScrollInterval;

        // 表示されるスライド数を動的に取得
        function getVisibleSlides() {
            const containerWidth = document.querySelector('.my-slider-container-onimage').offsetWidth;
            const slideWidth = mySlides[0].offsetWidth + 20; // スライドの幅 + マージン
            return Math.round(containerWidth / slideWidth); // 四捨五入
        }

        // スライドを更新
        function updateMySlider() {
            const slideWidth = mySlides[0].clientWidth + 20; // スライドの幅 + マージン
            mySliderTrack.style.transform = `translateX(-${myCurrentSlide * slideWidth}px)`;
        }

        // 自動スライド
        function autoScroll() {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide++;
            if (myCurrentSlide >= mySlideCount - visibleSlides + 1) {
                myCurrentSlide = 0; // 最初のスライドに戻る
            }
            updateMySlider();
        }

        // タイマーリセット＆再スタート
        function resetAutoScroll() {
            clearInterval(autoScrollInterval); // タイマーリセット
            autoScrollInterval = setInterval(autoScroll, slideIntervalTime); // タイマー再スタート
        }

        // 矢印をクリックでスライド移動、タイマーリセット
        myBtnNext.addEventListener('click', () => {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide++;
            if (myCurrentSlide >= mySlideCount - visibleSlides + 1) {
                myCurrentSlide = 0; // 最初のスライドに戻る
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        });

        myBtnPrev.addEventListener('click', () => {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide--;
            if (myCurrentSlide < 0) {
                myCurrentSlide = mySlideCount - visibleSlides; // 最後のスライドに戻る
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        });

        // 自動スクロールを開始
        autoScrollInterval = setInterval(autoScroll, slideIntervalTime);

        // ウィンドウのリサイズ時にスライドを更新
        window.addEventListener('resize', updateMySlider);

        // スマホ用のスワイプ操作の実装
        let touchStartX = 0;
        let touchEndX = 0;

        document.querySelector('.my-slider-onimage').addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        });

        document.querySelector('.my-slider-onimage').addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleGesture();
        });

        function handleGesture() {
            const visibleSlides = getVisibleSlides();
            if (touchEndX < touchStartX) {
                // 右スワイプ
                myCurrentSlide++;
                if (myCurrentSlide >= mySlideCount - visibleSlides + 1) {
                    myCurrentSlide = 0; // 最初のスライドに戻る
                }
            } else if (touchEndX > touchStartX) {
                // 左スワイプ
                myCurrentSlide--;
                if (myCurrentSlide < 0) {
                    myCurrentSlide = mySlideCount - visibleSlides; // 最後のスライドに戻る
                }
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        }
    });
</script>

キャプションの下で画像がスライドするスライダー/カルーセル

スライダー見出し

こちらはキャプションです。
こちらはキャプションです。
こちらはキャプションです。

サンプルコードを見る

HTML

<div class="slider-container">
    <div class="slider-wrapper">
        <div class="slider-slides">
            <!-- 各スライド画像 -->
            <div class="slider-slide">
                <img src="画像URLを指定" alt="画像1">
            </div>
            <div class="slider-slide">
                <img src="画像URLを指定" alt="画像2">
            </div>
            <div class="slider-slide">
                <img src="画像URLを指定" alt="画像3">
            </div>
        </div>
        <!-- キャプション -->
        <div class="slider-caption">
            <div class="slider-caption-title">スライダー見出し</div>
            <div class="slider-caption-text">
                こちらはキャプションです。<br>
                こちらはキャプションです。<br>
                こちらはキャプションです。<br>
            </div>
        </div>
        <!-- インジケーター -->
        <div class="slider-indicator">
            <span class="slider-dot slider-active"></span>
            <span class="slider-dot"></span>
            <span class="slider-dot"></span>
        </div>
    </div>
</div>

<style>
/* スライダー全体 */
.slider-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px; /* 下に余白を追加 */
}

/* スライドラッパー */
.slider-wrapper {
    position: relative;
}

/* スライドの表示エリア */
.slider-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* 各スライド */
.slider-slide {
    min-width: 100%;
}

.slider-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* キャプション */
.slider-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5); /* 半透明の黒背景で全体を覆う */
    color: white;
    text-align: center;
    padding: 20px;
}

/* 見出し */
.slider-caption-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* キャプションテキスト */
.slider-caption-text {
    font-size: 1.2rem;
}

/* インジケーター */
.slider-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-dot.slider-active {
    background-color: #fff; /* アクティブなインジケーターを白色に */
}
</style>

<script>
    let currentSlideIndex = 0;
    const sliderSlides = document.querySelectorAll('.slider-slide');
    const sliderDots = document.querySelectorAll('.slider-dot');

    function showSliderSlide(index) {
        // インデックスが範囲外の場合の処理
        if (index >= sliderSlides.length) {
            currentSlideIndex = 0;
        } else if (index < 0) {
            currentSlideIndex = sliderSlides.length - 1;
        } else {
            currentSlideIndex = index;
        }

        // スライド位置の変更
        document.querySelector('.slider-slides').style.transform = `translateX(-${currentSlideIndex * 100}%)`;

        // インジケーターの更新
        sliderDots.forEach((dot, i) => {
            dot.classList.toggle('slider-active', i === currentSlideIndex);
        });
    }

    // 自動スライド機能
    function startSliderAutoSlide() {
        setInterval(() => {
            showSliderSlide(currentSlideIndex + 1);
        }, 3000); // 3秒ごとにスライド
    }

    // インジケータークリックイベント
    sliderDots.forEach((dot, i) => {
        dot.addEventListener('click', () => showSliderSlide(i));
    });

    // 初期表示
    showSliderSlide(currentSlideIndex);
    startSliderAutoSlide();
</script>

レスポンシブデザインに対応
3-5秒おきに自動でスライド
　無限ループ機能付き

うる

別の記事でキャプション無しバージョンがあったね

今回はキャプションありバージョンです

キャプション無しの画像スライダー

キャプション無しのスライダーや詳細な解説、カスタマイズ方法はこちらをご覧ください

↑カスタマイズはこちらをご覧ください。

うる

今回はスライダーの画像は3枚なのね

キャプションを入れる場合は横幅があった方が良いかなと

うる

なるほどね

画像スライダーのサンプルコードをコピペで実装する方法

サンプルコードをHTMLファイルにコピペしてください。
WordPressのページ内に埋め込む場合は「カスタムHTML」ブロック内にコードをコピペしてください。

カスタムHTMLブロックの挿入例 — WordPressでのカスタムHTMLブロックの挿入

画像スライダーのカスタマイズ方法

HTML・CSS・JavaScriptを調整することで、スライダーをカスタマイズできます。

詳細なカスタマイズ方法は以下の記事をご覧ください。

画像スライダーの画像とキャプションの編集

画像を変更する場合

2行目のsrc="{URL}"のURLを変更します。

キャプションを変更する場合

3行目のCaption 1と記載されている箇所を変更します。

HTML

<div class="my-slider__item">
　　<img src="https://via.placeholder.com/300x200?text=Image+1" alt="画像1">
　　<div class="my-slider__caption">Caption 1</div>
</div>

以上です！

うる

キャプションの有無で使い分けられるのは便利ね

ご自身のイメージに合う方を使ってください

Ueda

フリーランスエンジニア

RPAエンジニアです。
UipathやVBAを使用した開発を得意としています。優れた可読性と効率的な設計を併せ持つRPA開発を心がけています。
RPA初心者向けの教育経験多数あり。RPAの開発サポートも承ります。

Wordpressを用いたHP制作のお仕事も経験があります。本サイトもWordpressを用いて制作しております。

ペットのチワプーと暮らしてます。

お仕事のご依頼はこちらから

URLをコピーしました！

コピペで簡単！WordPress＆HTML対応の画像スライダーの作成方法【自動スライド&キャプションあり&プラグイン不要】

WordPressでも実装できる画像スライダー/カルーセルのサンプルコード

画像の下にキャプションを表示する画像スライダー

マウスホバーするとキャプションが表示される画像スライダー

画像の上にキャプションが表示される画像スライダー

キャプションの下で画像がスライドするスライダー/カルーセル

キャプション無しの画像スライダー

画像スライダーのサンプルコードをコピペで実装する方法

画像スライダーのカスタマイズ方法

画像スライダーの画像とキャプションの編集

コメント

コメントするコメントをキャンセル

コピペで簡単！WordPress＆HTML対応の画像スライダーの作成方法【自動スライド&キャプションあり&プラグイン不要】

WordPressでも実装できる画像スライダー/カルーセルのサンプルコード

画像の下にキャプションを表示する画像スライダー

マウスホバーするとキャプションが表示される画像スライダー

画像の上にキャプションが表示される画像スライダー

キャプションの下で画像がスライドするスライダー/カルーセル

キャプション無しの画像スライダー

画像スライダーのサンプルコードをコピペで実装する方法

画像スライダーのカスタマイズ方法

画像スライダーの画像とキャプションの編集

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル