【JavaScript】クリックで切り替わるスライダーを作ってみよう！（素のJS)

ホーム

JavaScript

この記事にはプロモーションが含まれています。

投稿：2023・07・07

更新：2023・07・07

画像のスライダーは通常、ライブラリでサクッと実装することが多いかと思いますが、JavaScriptを学ぶことが目的の場合はあえて自力（素のJS）で実装してみるのもおすすめです。

ライブラリはとても便利なものですが、便利すぎるが故に、『jQueryのコードをコピペするばっかりで、プログラミングスキルが身についている気がしない…』ということになってしまいがちです。

そこで、今回はライブラリに頼らず、素のJavaScriptで画像のスライダーを実装する方法をご紹介します。

具体的には下のような、矢印のボタンをクリックすると画像が切り替わるタイプのスライダーを作っていきます。

画像スライダーのデモ

本番ではライブラリを利用するにしても、基本的なものを自力で作れるレベルになっておくことで、ライブラリをカスタマイズすることが容易になります。

どこかの誰かが書いたお手本のコードをコピペすることしかできないような、そんなエンジニア？にはならないよう、基礎力をしっかり身につけていきましょう！

この記事を読むことで分かること

・overflowプロパティによる要素のクリップ
・場合分けをして状況を整理する方法
・switch文を使った条件分岐処理

▼動画解説は下のサムネイルから（YouTubeに飛びます）

まずは見た目を整える

今回はJavaScriptのコードを中心に解説していこうと思うのですが、まずは見た目の調整（CSS）についてざっくり説明していきます。

いきなりですが、HTMLとCSSの完成コードを見ていきましょう。ポイントとなる部分は後ほど解説を加えます。

box-sizingは全ての要素でborder-boxであるものとします。

HTML

<div class="slider">
    <!-- 画像表示部分 -->
    <div class="slider_outer">
        <div class="slider_container">
            <div class="slider_item">
                <img src="donut01.webp" alt="チョコレートドーナツ" width="250" height="250">
            </div>
            <div class="slider_item">
                <img src="donut02.webp" alt="ホワイトチョコレートドーナツ" width="250" height="250">
            </div>
            <div class="slider_item">
                <img src="donut03.webp" alt="ハニーシロップドーナツ" width="250" height="250">
            </div>
        </div>
    </div>

    <!-- 進むボタンと戻るボタン -->
    <button type="button" class="next_btn">▶️</button>
    <button type="button" class="back_btn">◀️</button>
    
    <!-- ドットインジケータ -->
    <div class="indicator_container">
        <div class="indicator indicator1"></div>
        <div class="indicator"></div>
        <div class="indicator"></div>
    </div>
</div>

CSS

/* 画像スライダー */
.slider {
    width: 300px;
    height: 300px;
    display: grid;
    justify-content: center;
    position: relative; 
}
.slider_outer {
    position: relative;
    width: 250px;
    height: 250px;   
    overflow: hidden;
}
.slider_container {
    display: flex;
    column-gap: 30px;
    transition: .5s ease-in-out;
}

/* 進む・戻るボタン */
button {
    all: initial;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
}
button:active {
    opacity: .6;
}
.next_btn {
    position: absolute;
    color: lightcoral;
    top: 110px;
    right: -20px;
}
.back_btn {
    position: absolute;
    color: lightgray;
    top: 110px;
    left: -15px
}

/* ドットインジケータ */
.indicator_container {
    display: flex;
    justify-content: center;
    column-gap: 30px;
}
.indicator {
    width: 10px;
    height: 10px;
    background-color: lightgray;
    border-radius: 50%;
}
.indicator1 {
    background-color: gray;
}

表示結果（画像）

それでは、コードのポイントとなる部分に解説を加えていきます。

HTMLの構造は見ての通りです。全体をdiv要素（class=”slider”）でマークアップし、ドットインジケータ等を含むスライダーの幅と高さ（width/height）を指定しています。

さらに、position: relativeとすることで基準位置になるように指定し、このdiv要素を基準として、進む・戻るボタンの位置をposition: absoluteで調整しています。

一番重要なポイントは、画像が横並びになるように指定（display: flex）した上で、親要素からはみ出る部分をクリップ（overflow: hidden）しているという点です。

ここでは、３枚の画像を格納しているslider_containerクラスのdiv要素でdisplay: flexを指定し、その親要素であるslider_outerクラスのdiv要素にoverflow: hiddenを指定していることに注目してください。

もし、overflowの指定がなければ、表示結果は下の画像のようになります。

表示結果（画像）

overflowをhiddenに指定することで見せたくない部分をクリップして隠しておき、slider_containerクラスのdiv要素をtranslateXで横軸方向に動かすことで画像スライダーになります。

また、初期状態（チョコレートドーナツの画像が表示されている状態）の時は、左の戻るボタンをクリックしても意味がないことをわかりやすくするため、戻るボタンの色をlightgray、一番左側のドットインジケータの色をgrayにしています。

戻る・進むボタンの色とドットインジケータの色は、状態によって色が切り替わるように、この後JavaScriptで調整を加える必要があります。

次のステップでは、JavaScriptコードを記述する前にまず状況を整理して、どのような仕組みにすればコードが簡単に書けるようになるかを考えてみましょう。

POINT!

・全体をマークアップする要素でスライダーの高さと幅を設定しよう！
・displayをflexにして画像を横並びにし、親要素からはみ出る部分はoverflowをhiddenにしてクリップしよう！
・slider_containerクラスのdiv要素を横に動かすことでスライダーになる！

場合分けで状況を整理する

複雑な機能を実装したい場合、いきなりコードを書き始めてもうまくいかなかったり、無駄が多くて冗長なコードになってしまいがちです。

なので、コードを書き始める前にまずしっかりと状況を整理して、『どんな時にどんな機能が求められるか？』を正確に把握することが大切だと言えます。

ということで、さっそく状況を整理してみましょう。今回のサンプルスライダーの状況は、次のようになっています。

・画像は全部で３枚で横並びになっており、初期位置は一番左
・進む/戻るボタンと、ドットインジケータがある

画像が３枚ということは、管理しなければならない状態も３つということになりますね。

具体的には次の３つの状態を適切に管理することが求められます。

（１）一番左の画像が表示されている時
（２）真ん中の画像が表示されている時
（３）一番右の画像が表示されている時

そして、それぞれの状態の時に求められる機能は次のようになります。

スマホでは表を横にスクロールできます。

パーツ＼状態	（１）の時	（２）の時	（３）の時
進むボタン	機能する	機能する	機能しない
戻るボタン	機能しない	機能する	機能する
ドットインジケータ	一番左	真ん中	一番右

どの状態の時に何をすれば良いか、大分わかりやすくなりましたね。

状態管理の方法は色々考えられますが、今回はそれぞれの状況に応じて変数に１〜３の整数を代入することで、状態を管理してみたいと思います。

たとえば、let sliderStatus = 1（初期状態）と定義するとしたら、（２）の時は２を、（３）の時は３をsliderStatus変数に代入すれば、現在どの状態にあるかを常に把握することができるようになります。

そして、このように論理的にロジックを作り上げていくことこそが、プログラミングにおいて最も重要な過程です。

プログラミングスキルを磨く＝メソッドを一つでも多く覚えるとか、小手先のテクニックに意識が向いてしまいがちですが、メソッドを覚えることにあまり意味はありません。

どんなメソッドも使う機会がなければいずれ忘れてしまいますし、必要に応じてその都度調べて使いこなすことができれば、覚えておく必要はありません。

それよりも、アルゴリズムやオブジェクト指向など、プログラミングの根本的な考え方や仕組みを理解し、適切にロジックを組み立てられるようになっておくことの方が大切だと言えるでしょう。

話が横道に逸れてしまいましたが、次のステップでJavaScriptコードを書き、スライダーを完成させていきましょう！

POINT!

・複雑な機能を実装したい場合は、まず状況をしっかりと整理することから始めよう！
・今回の例では、３つの状態を管理する必要がある！
・状況に応じて変数に１〜３までの整数を格納することで、画像の表示状態管理が容易になる！

switch文で状態に応じた処理を行う

管理しなければならない状態が、たとえば真と偽の２つだけであればif文でシンプルに記述できますが、今回のように複数の状態を管理しなければならないケースではswitch文が便利です。

複数の条件に応じた処理はif文でもできるのですが、else if〜が重なると条件分岐がわかりづらくなるというデメリットがあります。

一方、switch文であれば条件分岐をよりシンプルに記述することができるため、条件に応じた処理の流れが分かりやすくなります。

switch文のシンプルな構文は次の通りです。

switch文の構文

switch (条件となる変数や式など) {
  case value1: ※条件と比較する値
    処理
    break;
  case value2:
    処理
    break;
  // …
  case valueN:
    処理
    break;
  default:
    処理
}

defaultはどのcaseにも当てはまらない場合に行われる処理ですが、これは省略可能です。

今回は１〜３の整数（状態）のうち、必ずいずれかの数値に該当するように設計しているため、default節は省略します。

また、Swiftではbreakがなくてもswitch文から抜け出せますが、JavaScriptではbreakをつけ忘れると、次のbreakまで処理が続けて行われてしまいます。

なので、『ここで処理を止めたい』という場合はbreakを忘れないように気をつけましょう。（今回のスライダー実装でも必要です）

以上を踏まえると、今回のswitch文は次のようになります。

JavaScript

// スライダーの状態（初期は１）
let sliderStatus = 1;

switch(sliderStatus) {
    case 1:
        // 状態が（１）の時の処理
        break;
    case 2:
        // 状態が（２）の時の処理
        break;
    case 3:
        // 状態が（３）の時の処理
        break;
}

あとは、進むボタンもしくは戻るボタンがクリックされた時に、必要な処理を行うようにすればOKですね。

クリックイベントは使用頻度がかなり高く、説明を必要としない人も多いかと思うので、ここではaddEventListener(click)の詳しい説明は省略します。

switch文で適切に場合分けができていれば、その後の処理は難しくはありません。それでは、完成系のJavaScriptコードを確認していきましょう！

JavaScript

// スライダーコンテナ、進む・戻るボタン、ドットインジケータの要素を取得
const sliderContainer = document.querySelector(".slider_container");
const nextBtn = document.querySelector(".next_btn");
const backBtn = document.querySelector(".back_btn");
const indicators = document.querySelectorAll(".indicator");

// スライダーの状態（初期は１）
let sliderStatus = 1;

// 進むボタンが押された時
nextBtn.addEventListener("click", () => {
    switch(sliderStatus) {
        case 1: // （１）の時の処理
            sliderStatus = 2;
            sliderContainer.style.transform = `translateX(-${280 * 1}px)`;
            backBtn.style.color = "lightcoral";
            indicators[0].style.backgroundColor = "lightgray";
            indicators[1].style.backgroundColor = "gray";
            break;
        case 2: // （２）の時の処理
            sliderStatus = 3;
            sliderContainer.style.transform = `translateX(-${280 * 2}px)`;
            nextBtn.style.color = "lightgray";
            indicators[1].style.backgroundColor = "lightgray";
            indicators[2].style.backgroundColor = "gray";
            break;
        case 3: // （３）の時の処理
            break;
    }
});

// 戻るボタンが押された時
backBtn.addEventListener("click", () => {
    switch(sliderStatus) {
        case 1: // （１）の時の処理
            break;
        case 2: // （２）の時の処理
            sliderStatus = 1
            sliderContainer.style.transform = `translateX(${0}px)`;
            backBtn.style.color = "lightgray";
            indicators[1].style.backgroundColor = "lightgray";
            indicators[0].style.backgroundColor = "gray";
            break;
        case 3: // （３）の時の処理
            sliderStatus = 2;
            sliderContainer.style.transform = `translateX(-${280 * 1}px)`;
            nextBtn.style.color = "lightcoral";
            indicators[2].style.backgroundColor = "lightgray";
            indicators[1].style.backgroundColor = "gray";
            break;
    }
});