【もりけん塾 @JS課題18】Vanilla JSでスライドショー作成② ドットナビを追加する編

const createIndicator = (data) => {
  const ul = createElementWithClassName("ul", "indicator-list")
// 取得した 画像のdata分 loopして要素を作成する
  for (let i = 0; i < data.length; i++) {
    const li = createElementWithClassName("li", "indicator-item");
// 初期設定として最初の要素を選択
    i === 0 && li.classList.add("is-selected");
    ul.appendChild(li);
  }
  return ul;
}

const setClickEventInIndicator = () => {
  const indicators = document.querySelectorAll(".indicator-item");
  indicators.forEach((indicator) => {
    target.addEventListener("click", (e) => {
 　  　// dotsナビの切り替え
    switchIndicator(e.target);
    // 画像の切り替え
    switchSlideImg(findIndexOfSelectedIndicator());
　　　　  //カウンターの更新
    updateOfCounter();
    // disabledの切り替え
   　toggleTheDisabled();
    });
  });
}

const switchIndicator = (target) => {
// 現在選択されている、indicatorを取得
  const selectedIndicator = document.querySelector(".is-selected");
// indicatorを配列で変数へ格納
  const indicators = [...document.querySelectorAll(".indicator-item")];
// 現在選択されているindicatorからis-selectedを外す
  selectedIndicator.classList.remove("is-selected");
// 選択された indicatorへis-selectedを付与
  (indicators[target] ?? target).classList.add("is-selected");
}

const createIndicator = (imageLength) => {
  const ul = createElementWithClassName("ul", "indicator-list");
  for (let i = 0; i < imageLength; i++) {
    const li = createElementWithClassName("li", "indicator-item");
    li.setAttribute("data-num", i);    //追加
    i === 0 && li.classList.add("is-selected");
    ul.appendChild(li);
  }
  return ul;
};

const setClickEventInIndicator = () => {
  const indicators = document.querySelectorAll(".indicator-item");
  indicators.forEach((indicator) => {
    indicator.addEventListener("click", (e) => {
      switchIndicator(e.target.dataset.num); //渡す引数をdata属性に変更
      switchSlideImg(findIndexOfSelectedIndicator());
      updateOfCounter();
      toggleTheDisabled();
    });
  });
};

const switchIndicator = (targetIndex) => {   
  const selectedIndicator = document.querySelector(".is-selected");
  const indicators = [...document.querySelectorAll(".indicator-item")];
  selectedIndicator.classList.remove("is-selected");
 (indicators[targetIndex].classList.add("is-selected"); 
}

const switchSlideImg = (targetIndex) => {
　　//　現在表示中の要素を取得
  const displayedSlideItem = document.querySelector(".is-displaying");
　 // 現在表示中の要素からクラスを外す
  displayedSlideItem.classList.remove("is-displaying");
  // スライドを全て取得
  const slideItems = [...document.querySelectorAll(".slide-item")];
 // 対象のスライド要素にクラスを付与
  slideItems[targetIndex].classList.add("is-displaying");
};

// indicatorsの場合
const setClickEventInIndicator = () => {
  const indicators = document.querySelectorAll(".indicator-item");
  indicators.forEach((indicator) => {
    indicator.addEventListener("click", (e) => {
      switchIndicator(e.target.dataset.num);
      switchSlideImg(findIndexOfSelectedIndicator());
      updateOfCounter();
      toggleTheDisabled();
    });
  });
};

// 現在選択中のドットナビのindexを返す
const findIndexOfSelectedIndicator = () => {
  const indicators = [...document.querySelectorAll(".indicator-item")];
  return indicators.findIndex((el) => el.classList.contains("is-selected"));
}

const setClickEventInArrowButton = () => {
  const arrowButtons = document.querySelectorAll(".arrowBtn");
  arrowButtons.forEach((button) => {
    button.addEventListener("click", (e) => {
// もし、nextボタンがクリックされた場合は、引数に現在表示中のindex + 1を渡す
// それ以外(つまりpreviousの場合)は現在表示中のindex-1で渡す
      if (e.currentTarget.value === "next") {
        switchSlideImg(findIndexOfDisplayedItem() + 1);
      } else {
        switchSlideImg(findIndexOfDisplayedItem() - 1);
      }
      updateOfCounter();
      toggleTheDisabled();
      switchIndicator(findIndexOfDisplayedItem());
    });
  });