戻るボタンを機能させる

ボタンをクリックしたら前の画像にスライドするようにイベントを設定していきます。

• 戻るボタンの情報を取得
• 動作させる

戻るボタンの情報を取得

・前回までで進むボタンを完成させて行きました。

・今回は戻るボタンを機能させていきましょう。

・全体像としては進むボタンの時と同様でボタンのIDを取得してスライド1枚分だけ引いて行けばいいです。

・まずはIDの取得からしていきましょう。

・進むボタンのIDを取得した時と同様にgetElementByIdを使っていけばいいですね。

・こんな感じです。

const prev = document.getElementById(‘prev’);

動作させる

・次にクリックしたらどうなるかと言う部分も進むボタンとほとんど一緒なのでコピー&ペーストしていきましょう。

・ただ取得しているIDはprevなのでnextをprevに変えていきましょう。

・またcurrentIndexも足し上げるのではなく引いて行くのでcurrentIndex—;と書いていきましょう。

・変える部分はこの2点だけですね。

・全体でこんな感じです

{

  const next = document.getElementById(‘next’);

  const prev = document.getElementById(‘prev’);

  const ul = document.querySelector(‘ul’);

  const slides = ul.children;

  let currentIndex = 0;

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

    currentIndex++;

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

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

  });

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

    currentIndex–;

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

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

  });

}