BOOK Studio947
狩野祐東・狩野さやか著書

p294~295について

kumasin asked 9か月 ago

先生、初めまして 第6章を勉強しております p294~295の $imgContainer.position().leftをdirection * $carousel.width()に+する点が分かりません cssでthumbsはleft:0;です 解説によりますと、現在のleftプロパティ値を足して、移動すべき位置を算出とありますが、$imgContainer.position().leftを書かずに試してみても移動はします $carousel.width()だけ書くのとどう違うのでしょうか? もう少し詳しく教えて頂きたくお願い申し上げます

1 Answers
狩野 祐東 Staff answered 9か月 ago

1回もクリックしていないとき、.thumbs のCSSは left: 0 です。ここで、.thumbs の幅を W とします。
次に、1回右ボタンをクリックしたとすると、.thumbs のCSSは left: -W になります。ここまでは理解されていると思います。
2回目のクリックでは、すでに.thumbsのCSSは left: -W になっているので、さらに -W して、left: -W+(-W) にする必要があります。
つまり、このmoveを算出する計算式は、クリックした時点でのleftプロパティの値に、さらに.thumbsの幅を足していることになります。もし$imageContainer.position().leftを足さないと、leftプロパティの値が常に-Wになってしまうので、2回目以降のクリックで.thumbsが動かなくなってしまいます。

kumasin replied 9か月 ago

ご教授賜りありがとうございます
すごくよく分かりました!!