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

2024-11-02

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

うる

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

WordPressでもコピペで実装できる画像スライダーとは

WordPressでも実装可能な画像スライダー（カルーセル）のコードを紹介します。
プラグイン不要かつコピペで実装できます！

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

うる

画像スライダーってなんだっけ？

HPでよく見るこんなやつです

レスポンシブデザインに対応しているので、画面サイズに応じてスライドの数が自動で変更されます。
5秒おきに自動でスライドします。
無限ループ機能付き

うる

なんか難しそうね

コピペで作れるようにしているので紹介します

キャプション付きの画像スライダー/カルーセル

キャプション付きの画像スライダーを作成したい場合、こちらの記事をご覧ください。

WordPressでコピぺで実装できる画像スライダーのサンプルコード

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

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

うる

カスタマイズしたい場合はどうすれば良いの？

カスタマイズ方法は後述します

うる

コードのハイライト部分が主なカスタマイズする箇所ね

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">
            </div>
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+2" alt="画像2">
            </div>
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+3" alt="画像3">
            </div>
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+4" alt="画像4">
            </div>
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+5" alt="画像5">
            </div>
            <div class="my-slider_item">
                <img src="https://via.placeholder.com/300x200?text=Image+6" alt="画像6">
            </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)); /* 6つのスライドに合わせた幅 */
    }

    .my-slider_item {
        text-align: center;
        flex: 0 0 calc(25% - 20px); /* 4つの画像がちょうど収まるサイズ */
        margin: 0 10px;
    }

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

    .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: 10px;
    }

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

    @media (max-width: 768px) {
        .my-slider_item {
            flex: 0 0 calc(50% - 20px); /* 2つ表示 */
            max-width: none;
        }
    }

    @media (max-width: 480px) {
        .my-slider_item {
            flex: 0 0 calc(100% - 20px); /* 1つ表示 */
        }
    }
</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>

画像スライダー/カルーセルのカスタマイズ

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

画像スライダーの総画像数を変更

サンプルコードの5-22行目を変更します。
以下の部分を増減させることで、画像数を調整できます。

HTML

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

画像の変更は2行目のsrcのURLを置き換えてください。

例：画像数を8枚に増やす場合

HTML

<div class="my-slider_item">
  <img src="https://via.placeholder.com/300x200?text=Image+1" alt="画像1">
</div>
<div class="my-slider_item">
  <img src="https://via.placeholder.com/300x200?text=Image+2" alt="画像2">
</div>
<div class="my-slider_item">
  <img src="https://via.placeholder.com/300x200?text=Image+3" alt="画像3">
</div>
<div class="my-slider_item">
  <img src="https://via.placeholder.com/300x200?text=Image+4" alt="画像4">
</div>
<div class="my-slider_item">
  <img src="https://via.placeholder.com/300x200?text=Image+5" alt="画像5">
</div>
<div class="my-slider_item">
  <img src="https://via.placeholder.com/300x200?text=Image+6" alt="画像6">
</div>
<div class="my-slider_item">
  <img src="https://via.placeholder.com/300x200?text=Image+7" alt="画像7">
</div>
<div class="my-slider_item">
  <img src="https://via.placeholder.com/300x200?text=Image+8" alt="画像8">
</div>

またCSSの変更も必要です。
サンプルコードの46行目を修正しましょう。
具体的にはwidth: calc(6 * (25% + 20px));のハイライト部分の数値を変更します。

例：画像数を8枚に増やす場合

CSS

width: calc(8 * (25% + 20px)); /* 8つのスライドに合わせた幅 */

1度に表示する画像枚数を変更

サンプルコードの46行目と51行目をそれぞれ変更します。

具体的には以下のハイライト部分の数値を変更します。
46行目：width: calc(6 * (25% + 20px)); /* 6つのスライドに合わせた幅 */
51行目：flex: 0 0 calc(25% - 20px); /* 4つの画像がちょうど収まるサイズ */

例：1度に表示する画像を3枚にする場合

CSS　46行目

width: calc(6 * (33.33% + 20px)); /* 6つのスライドに合わせた幅 */

CSS　51行目

flex: 0 0 calc(33.33% - 20px); /* 3つの画像がちょうど収まるサイズ */

数値の計算方法：100÷（1度に表示する画像の数） %

またJavaScript部分も以下のように修正します。
ハイライト部分を修正しています。

1度に表示する画像を3枚にしたコードを見る

JavaScript

<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) {
                myCurrentSlide = 0; // 最初のスライドに戻る
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        });

        myBtnPrev.addEventListener('click', () => {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide--;
            if (myCurrentSlide < 0) {
                myCurrentSlide = mySlideCount - visibleSlides -1; // 最後のスライドに戻る
            }
            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) {
                    myCurrentSlide = 0; // 最初のスライドに戻る
                }
            } else if (touchEndX > touchStartX) {
                // 左スワイプ
                myCurrentSlide--;
                if (myCurrentSlide < 0) {
                    myCurrentSlide = mySlideCount - visibleSlides -1; // 最後のスライドに戻る
                }
            }
            updateMySlider();
            resetAutoScroll(); // タイマーリセット
        }
    });
</script>

自動でスライドする間隔を変更

サンプルコードの111行目を変更します。
具体的にはconst slideIntervalTime = 5000; // 5秒ごとにスライドのハイライト部分を変更します。

例：自動でスライドする間隔を10秒にする場合

JavaScript

const slideIntervalTime = 10000; // 10秒ごとにスライド

秒数はミリ秒で指定する必要があります。
ミリ秒は1000分の1秒なので、秒数×1000で計算できます。
例：1分 = 60秒×1000 = 60000ミリ秒

自動でスライドする機能を削除

サンプルコードの自動スライドに関する箇所を削除します。
削除行数が多いので、以下のコードを参考にしてください。

例：自動スライド機能を削除したJavaScript部分を例示します。

自動スライド機能を削除したコードを見る

JavaScript　自動スライド機能削除

<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;

        // 表示されるスライド数を動的に取得
        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)`;
        }

        // 次のスライド
        myBtnNext.addEventListener('click', () => {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide++;
            if (myCurrentSlide >= mySlideCount - visibleSlides + 1) {
                myCurrentSlide = 0; // 最初のスライドに戻る
            }
            updateMySlider();
        });

        // 前のスライド
        myBtnPrev.addEventListener('click', () => {
            const visibleSlides = getVisibleSlides();
            myCurrentSlide--;
            if (myCurrentSlide < 0) {
                myCurrentSlide = mySlideCount - visibleSlides; // 最後のスライドに戻る
            }
            updateMySlider();
        });

        // ウィンドウのリサイズ時にスライドを更新
        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();
        }
    });
</script>

カスタマイズの紹介は以上です

うる

結構いろいろ変更できるのね

参考になれば幸いです！

キャプション付き画像スライダーはこちらの記事からどうぞ！

Ueda

フリーランスエンジニア

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

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

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

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

URLをコピーしました！

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

WordPressでもコピペで実装できる画像スライダーとは

キャプション付きの画像スライダー/カルーセル

WordPressでコピぺで実装できる画像スライダーのサンプルコード

画像スライダー/カルーセルのカスタマイズ

画像スライダーの総画像数を変更

1度に表示する画像枚数を変更

自動でスライドする間隔を変更

自動でスライドする機能を削除

コメント

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

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

WordPressでもコピペで実装できる画像スライダーとは

キャプション付きの画像スライダー/カルーセル

WordPressでコピぺで実装できる画像スライダーのサンプルコード

画像スライダー/カルーセルのカスタマイズ

画像スライダーの総画像数を変更

1度に表示する画像枚数を変更

自動でスライドする間隔を変更

自動でスライドする機能を削除

コメント

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

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