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

もりけん塾 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による条件分岐の方法
  • コードをまとめるための考え方

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

私が所属しているフロントエンドエンジニアを目指す方のための塾 「もりけん塾」の森田賢二先生のTwitterはこちら!

先生のブログ「武骨日記」はこちら!

https://kenjimorita.jp/

まい

フロントエンドエンジニア目指して、勉強中です。

もりけん塾カテゴリの最新記事