JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでカスタム画像スライダーを作成する方法【初心者向け解説付き】

Webサイトに動きを加える定番パーツのひとつが「画像スライダー（カルーセル）」です。ライブラリを使わなくても、HTML・CSS・JavaScriptの基本だけで、前後ボタンとナビゲーションドット付きのカスタムスライダーを簡単に作ることができます。

この記事では、実際に動作する完全なサンプルコードを紹介しながら、それぞれの仕組みをわかりやすく解説します。

完成形のサンプルコード

以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くと画像スライダーが動作します。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    .Slide {
        display: none;
    }
    img {
        vertical-align: middle;
        width: 100%;
        height: 400px;
    }
    .slideContainer {
        max-width: 600px;
        position: relative;
        margin: auto;
    }
    .prevBtn,
    .nextBtn {
        position: absolute;
        top: 50%;
        width: auto;
        padding: 10px;
        background-color: rgb(255, 255, 75);
        color: rgb(50, 0, 116);
        font-weight: bolder;
        font-size: 18px;
    }
    .nextBtn {
        right: 0;
    }
    .Caption {
        color: #fbff09;
        font-weight: bold;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 25px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
    }
    .Navdot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: rgb(54, 5, 117);
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }
    .selected,
    .Navdot:hover {
        background-color: #d9ff00;
    }
    @media only screen and (max-width: 450px) {
        .prevBtn,
        .nextBtn,
        .Caption {
            font-size: 16px;
        }
    }
</style>
</head>
<body>
<div class="slideContainer">
<div class="Slide">
<img src="https://images.pexels.com/photos/3540375/pexels-photo-3540375.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
<div class="Caption">Photo 1</div>
</div>
<div class="Slide">
<img src="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
<div class="Caption">Photo 2</div>
</div>
<div class="Slide">
<img src="https://images.unsplash.com/photo-1584910758141-f7993f9e203d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80" />
<div class="Caption">Photo 3</div>
</div>
<a class="prevBtn">❮</a>
<a class="nextBtn">❯</a>
</div>
<br />
<div style="text-align:center">
<span class="Navdot" onclick="currentSlide(1)"></span>
<span class="Navdot" onclick="currentSlide(2)"></span>
<span class="Navdot" onclick="currentSlide(3)"></span>
</div>
<script>
    document.querySelector(".prevBtn").addEventListener("click", () => {
        changeSlides(-1);
    });
    document.querySelector(".nextBtn").addEventListener("click", () => {
        changeSlides(1);
    });
    var slideIndex = 1;
    showSlides(slideIndex);
    function changeSlides(n) {
        showSlides((slideIndex += n));
    }
    function currentSlide(n) {
        showSlides((slideIndex = n));
    }
    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("Slide");
        var dots = document.getElementsByClassName("Navdot");
        if (n > slides.length) {
            slideIndex = 1;
        }
        if (n < 1) {
            slideIndex = slides.length;
        }
        Array.from(slides).forEach(item => (item.style.display = "none"));
        Array.from(dots).forEach(
            item => (item.className = item.className.replace(" selected", ""))
        );
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " selected";
    }
</script>
</body>
</html>

コードの仕組みを解説

1. HTML構造：スライドとナビゲーション

各画像は .Slide クラスを持つ <div> で包まれ、その中に画像本体とキャプション（.Caption）が含まれています。スライダーの左右には「前へ」「次へ」ボタン（.prevBtn／.nextBtn）を配置し、下部には直接任意のスライドへジャンプできるナビゲーションドット（.Navdot）を並べています。

2. CSS：見た目とレスポンシブ対応

  • 初期状態で非表示： .Slide { display: none; } により、すべてのスライドは最初は隠れており、JavaScriptで表示対象だけを切り替えます。
  • ボタンの配置： position: absolute; と top: 50%; を組み合わせることで、矢印ボタンを画像の中央付近に重ねて表示しています。
  • ドットの状態変化： 現在選択中のドットは .selected クラスで色が変わり、transition プロパティによって滑らかに切り替わります。
  • レスポンシブ対応： メディアクエリを使い、画面幅が450px以下の場合はボタンやキャプションのフォントサイズを小さくしてスマートフォンでも見やすくしています。

3. JavaScript：スライド切り替えのロジック

  • slideIndex： 現在表示中のスライド番号を管理する変数です。初期値は「1」です。
  • changeSlides(n)： 前後ボタンがクリックされたときに呼ばれ、slideIndexを +1 または -1 します。
  • currentSlide(n)： ドットがクリックされたときに呼ばれ、指定された番号のスライドを直接表示します。
  • showSlides(n)： スライダーの核となる関数です。まず全スライドと全ドットを非表示・選択解除した上で、現在のslideIndexに該当するスライドだけを表示し、対応するドットに selected クラスを付けます。

4. ループ処理（無限スライダー化）

showSlides() 内の条件分岐がポイントです。最後のスライドで「次へ」を押すと n > slides.length が成立し、slideIndexが「1」に戻ります。逆に最初のスライドで「前へ」を押すと n < 1 となり、最後のスライドへ移動します。これにより、スライダーが永続的にループする仕組みを実現しています。

実行結果

上記コードを実行すると、以下のような画像スライダーが表示されます。左右の矢印ボタン、下部のドットナビゲーションのどちらでもスライドを切り替えられます。

JavaScriptでカスタム画像スライダーを作成する方法【初心者向け解説付き】

まとめ

このように、外部ライブラリに頼らなくても、display の切り替えとインデックス管理というシンプルな考え方だけで、実用的な画像スライダーを作成できます。自動再生機能やフェード効果、スワイプ操作などを追加すれば、さらに本格的なスライダーへ発展させられるので、ぜひ自分なりにカスタマイズしてみてください。

  1. JavaScriptのImage()オブジェクトとは？使い方とサンプルコードを解説

    JavaScriptにおけるImage()オブジェクトは、HTMLの<img>要素を表すオブジェクトです。このオブジェクトを使うことで、JavaScriptから動的に画像を生成し、Webページに追加することができます。Image()コンストラクタには、引数として画像の幅と高さをピクセル単位で指定できます。また、生成した画像オブジェクトのsrcプロパティに画像のURLを設定することで、画像を読み込むことが可能です。Image()オブジェクトの基本的な使い方以下は、JavaScriptでImage()オブジェクトを使用するサンプルコードです。コード例<!DOCTYPE html&

  2. JavaScriptでアップロード前に画像をプレビュー表示する2つの方法

    セキュリティ上の理由により、ブラウザはinput要素で選択された画像ファイルのパスへの直接アクセスを許可していません。つまり、ブラウザ上で動作するJavaScriptはファイルシステムにアクセスできない仕組みになっています。そのため、ユーザーが選択した画像ファイルをサーバーやその他の場所へ送信する前にプレビュー表示したい場合は、少し工夫が必要です。本記事では、JavaScriptでアップロード前に画像をプレビューする2つの実装方法を、サンプルコード付きでわかりやすく解説します。方法1：URLクラスのcreateObjectURL()を使うURLクラスが提供するcreateObjectURL()