もりけん塾 JavaScript課題17 JavaScriptでスライドショーの作成

仕様

前回は、タブ切り替えを実装しましたが、今回の課題は、スライドショーの作成です。

仕様

仕様はこちら。

よくあるスライドショーを作ってみましょう

1. 画面遷移してから3秒後に解決されるPromiseが返すオブジェクトを元にimgタグを5つつくる。
2. それぞれは.z-indexで重ねた状態。矢印画像をクリックを押すとスライド画像が変わる。
3. 5枚中何枚目かを表示して、5/5の場合Nextの矢印はdisabledにする。1/5枚の時はBackボタンはdisabledにする

チャレンジした点

今回、document.createElement()とObject.keysを使って、要素とその属性を作成するための関数を作ったことが、自分の中でチャレンジした点です。要素の生成が、とても楽になりました。

「要素と属性の生成を楽にする関数」についての記事は、こちらにまとめました。

CodeSandBox

こんな感じの見た目になりました。CSSはあまり自信がないです。

難しかったところ

今回、スライドの戻るボタンと進むボタンの動きを実装をしました。

最初、戻るボタンと進むボタンは、別々の関数で考えていましたが、他の塾生さんのレビューでひとまとめにできると知り、まとめることにしました。

ボタンはループ処理して、クリックイベントをつけ、idがjs-nextBtnだった場合は、indexに1プラス、そうでない時（js-prevBtn)だったときは、indexを1マイナスするというコードにしています。

button.id === "js-nextBtn" ? index++ : index--;

const switchSliderItem = () => {
    const sliderButtons = document.getElementsByClassName("js-btn");
    const sliderItems   = document.getElementsByClassName("slider__item");
    let index = 0;
    for (const button of sliderButtons ){
        button.addEventListener("click",function(){  
            sliderItems[index].classList.remove("is-active");    

            button.id === "js-nextBtn" ? index++ : index--;
            sliderItems[index].classList.add("is-active");

            changeCurrentNumber(index);
            disabledButton(sliderItems,index);
        });
    }
}

さらに、一番最初のスライドと、最後のスライドの時は、ボタンをdisabledにする、という指示があるので、ボタンを無効にするための関数を作りました。

ここは思ったような動きになかなかならなくて、苦戦しました。

const disabledButton = (sliderItems,index) => {
    const nextBtn    = document.getElementById("js-nextBtn");
    const prevBtn    = document.getElementById("js-prevBtn");
    const firstIndex = 0;
    const lastIndex  = sliderItems.length -1;

    prevBtn.disabled = index === firstIndex;
    nextBtn.disabled = index === lastIndex;
}

コード

最終的にApproveをもらったコードはこちらです。レビューは、もなかさん、ちひろさんにして頂きました！ありがとうございます。

https://github.com/nakagawamai/js-lesson/blob/main/lesson17/script.js

コードレビュー、とても丁寧にして頂きました。感謝しかないです。

https://github.com/nakagawamai/js-lesson/pull/19

今回学んだこと

• Object .keysの使い方
• idによる条件分岐の方法
• コードをまとめるための考え方

今回はコードをまとめたり、効率のいい書き方をする方法を教えてもらい、とても勉強になりました。次は、このスライドショーにオートプレイ機能を実装します。