スライドの長さを計算する

2022-01-07

画像が1枚分だけ横にスライドするように修正していきます。

・前回まででスライドをアニメションすることができるようになりました。

・今回は画像の長さを自動で計算してその長さ分だけ左にスライドするようにしていきます。

・まずスライドする幅を画像の幅にすればいいと思うかもしれませんがこれだと見ているデバイスによって画像の長さが変わってしまいうまく画像が収まってくれません。

・ということでやり方としてはスライドの長さを取得して、テンプレートリテラルを使ってその値を変動しても計算が合うように自動で埋め込むようにしていきましょう。

・まずはスライドのリストをすべて取得していきたいのでconstでslidesと名前をつけつつ、ul.childrenを取得します。

・これでulの子要素であるliがslidesの中に格納されたことになります。

・こんな感じですね

const slides = ul.children;

・次にクリックされたらまずはスライドの長さを測るように書いていきましょう。

・constでslideWidthと名前をつけつつ最初のスライドの横幅を取得していきます。

・最初のスライドはslides[0]で取得ができて、スライドの情報はgetBoundingClientRect()と言うメソッドを使うことで取得できます。それのwidthの情報を取得したいのでこのように書いていきましょう。

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

・これで画像の横幅を取得ができたのでsideWidthをテンプレートリテラルにで埋め込んで行きましょう。

・後は左に移動させたいのでマイナスにしてあげる必要がありますので(${-1 * slideWidth}px)というようにテンプレートリテラルを書いてあげればいいでしょう

・前回やった ul.style.transform = 'translateX(-200px)’の-200pxの部分をテンプレートリテラルで埋め込めばいいでしょう。

・こんな感じですね

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

・JavaScriptを全体で見るとこんな感じになります

'use strict';

{

const next = document.getElementById('next');

const ul = document.querySelector('ul');

const slides = ul.children;

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

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

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

});

}