CSS HTML Javascript

ボタンの動作

updateButtons()メソッドを呼び出し、ボタンの状態が更新されるか確認していきます。

  • 関数のの呼び出し
  • 進むボタン
  • 戻るボタン

参考画像 参考画像

updateButtons() の呼び出し

・前回まででボタンが進みすぎたり戻りすぎたりするのを防ぐために上限に達したらボタンを隠すようにupdateButtons()を作ってきました。

・今回はそのupdateButtons()の設置をしていきたいとおもいます。

・まず考えなければ行けないのがどこで呼び出してしていくかですが結論から言うと最初とcurrentIndex++;直後とcurrentIndex—;の直後にいれます。

・具体的に見ていきましょう。

進むボタン

・最初にcurrentIndexが0の時にprevを消しておきたいのでページを読み込んだ直後に実行していきましょう。

・なので next.addEventListener('click', () => {…の前に入れて行けばいいですね。

・次にボタンをクリックした時にも実行してボタンの状態を更新していきます。

・ボタンを押された時に判定したいのでcurrentIndex++;のあとにupdateButtons();を入れていきましょう。

・こんな感じですね

next.addEventListener('click', () => {

    currentIndex++;

    updateButtons();

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

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

  });

戻るボタン

・同様に、戻るボタンを設定していきます。

・場所は同じでボタンを押された時に判定したいのでcurrentIndex--;のあとにupdateButtons();を入れていきましょう。

・こんな感じですね

prev.addEventListener('click', () => {

    currentIndex--;

    updateButtons();

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

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

  });

-CSS, HTML, Javascript