手動ボタンでスライド

手動でポチポチ動かすスライドです。ただ画像を入れ替えるだけなのですが、結構苦労しました。　　　　　　　　　　　　つまずいたところは左はしと右はしに行った後、ストップしなくてエラーになるところです。

① 【進む】【戻る】ボタンと【画像の枠】を取得する

② 　画像の配列を用意する

③ 【進む】ボタンを押した時の処理

④ 【戻る】ボタンを押した時の処理

indexを初期化して、ボタンを押すごとに増減させるまでは良かったのですが

用意した配列に照らし合わせて、画像を入れ替えるのが難しかったです。

①indexの初期化

// indexを初期化
let index = 0;
// 配列の数を取得
const len = pokemonImg.length;

【進む】ボタンを押した時の処理

// （増える）進むボタンを押したときの処理
forwardBtn.addEventListener("click", () => {
  // 一つ手前でボタン押し無効
  if (index < len - 1) {
    // index加算
    index++;
    // 画像挿入
    imgContainer.src = pokemonImg[index];
  }
});

③【戻る】ボタンを押した時の処理

// （減る） 戻るボタンを押したときの処理
backwardBtn.addEventListener("click", () => {
  // 一つ手前でボタン押し無効
  if (index >= 1) {
    // index減算
    index--;
    // 画像挿入
    imgContainer.src = pokemonImg[index];
  }
});

終わってみれば短いコードなのですが

一つ手前で操作無効に調節できるまで時間がかかりました・・・。

今はノーコードで、お洒落かつ素敵なスライドがすぐに作れますので

自分の手で一から作ることなんてないと思いますが

JavaScript学習の備忘録として。