進むボタンを完成させよう

何番目のスライドを表示したいかを変数で管理していきます。

• 次の画像まで移動
• Javascriptの書き方

次の画像まで移動

・前回までで進むボタンを押すと次の画像が表示するようにJavaScriptでいじって行きました。

・今回はスライドの進むボタンを最後の画像まで動くようにしていきましょう。

・まずは大まかな仕組みですが今は一つのスライド分を今のスライドに足し上げることで一つ分のスライドが動いて次の画像がでてくると言うし組むになっています

・なので2つ進めたい場合は単純に×2をしてあげると良いですね。

・しかしこのままだと2つ進んでしまうので変数を使って0から一つずつかける数字を上げていけば1枚目の写真は0なので変わらず2枚めの画像はスライド1つ分動かし3枚目の画像は2つ分動かすというように出来ます。

Javascriptの書き方

・ではどうするかですがテンプレートリテラルの中身に変数をいれます。

・こんな感じで挿入していきましょう

`translateX(${-1 * slideWidth * currentIndex}px)`

次に挿入したcurrentIndexに変数の0を代入していきたいので上で変数の指定をしていきましょう

・こんな感じですね

let currentIndex = 0;

・最後にクリックが押されるたびに足し上げて行きたいのでaddEventListenerのあとにcurrentIndex++;と書いていきましょう

・全体で見るとこんな感じですね

{

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

  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)`;

  });

}