データの重複

重複しているコードを一つの関数にまとめていきます。

• 関数を作ろう
• 関数の配置

関数を作ろう

・前回までで進むボタンと戻るボタンの動作を確認してきました。

・今回は重複しているコードを関数で一つにまとめてより見やすくしていきます。

・コードは短いほうがよくまとめられるものはまとめて上げる方が見やすくなります。

・今回は進むボタンと戻るボタンをクリックしたあとの幅を計算する部分が重複しているので関数にまとめまとめていきたいと思います。

・まず前回作ったupdateButtons();の前でfunctionで関数を作っていきます。

・関数名はmoveSlides()としていきます。

・そうしたら{}の中にまとめたい内容を書いていきましょう

・こんな感じですね。

  function moveSlides() {

    const slideWidth = slides[0].getBoundingClientRect().width;

    ul.style.transform = `translateX(${-1 * slideWidth * currentIndex}px)`;

  }

 

関数の配置

next

・これでmoveSlides()にまとめたい内容が格納できたので配置をしていきます。

・次にクリックしたらの中身に格納したmoveSlides()を配置していきます。元の位置にmoveSlides()と書いていけばいいだけですね。

・updateButtons();のあとにmoveSlides()と書いていきましょう。

・こんな感じですね。

  next.addEventListener(‘click’, () => {

    currentIndex++;

    updateButtons();

    moveSlides();

  });

prev

・同様にprevにも配置していきます。

・こんな感じです。

  prev.addEventListener(‘click’, () => {

    currentIndex–;

    updateButtons();

    moveSlides();

  });

全体像

・全体像はこうなります。

 function moveSlides() {

    const slideWidth = slides[0].getBoundingClientRect().width;

    ul.style.transform = `translateX(${-1 * slideWidth * currentIndex}px)`;

  }

  updateButtons();

  next.addEventListener(‘click’, () => {

    currentIndex++;

    updateButtons();

    moveSlides();

  });

  prev.addEventListener(‘click’, () => {

    currentIndex–;

    updateButtons();

    moveSlides();

  });

}