度々の質問失礼いたします
何点か疑問がございまして、ご教授頂きたく存じます
function doCarousel(btn, direction){
var $btn = btn;
var $carousel = $btn.closest(‘.carousel’);
var $imgContainer = $carousel.find(‘.thumbs’);
var move = direction * $carousel.width() + $imgContainer.position().left;
$imgContainer.filter(‘:not(:animated)’)
.animate({left: move},
{
duration:800,
①progress:function(){
var $this = $(this);
var $imgList = $this.find(‘.thumbs-list’).first();
//移動量がthumbs-listの幅を上回ったら.thumbsのポジションをリセット
var resetPos;
//[<]がクリックされた時
if(direction == 1 && 0 <= $this.position().left){
②resetPos = $this.position().left – $imgList.outerWidth();
$this.css({“left”: resetPos});
}
//[>]がクリックされた時
if(direction == -1 && $imgList.outerWidth() <= Math.abs
($this.position().left)){
③resetPos = $this.position().left + $imgList.outerWidth();
$this.css({“left”: resetPos});
①ですが、CSSのプロパティ値が変更される度に呼び出されるということですが、これはクリックされてleft値が変わる時ということでしょうか?
そして$this.find(‘.thumbs-list’).first();は<li>のことですか?
②は上記前提が分からないので、何故 $this.position().left から$imgList.outerWidth();を引くのか、③は$this.position().left に $imgList.outerWidth();を足すのかが不明瞭になってしまいます。
if文は一度クリックすれば条件を満たしますよね?
この条件式によってサムネイル画像が途切れずに表出してるという理解で正しいですか?
移動量がthumbs-listの幅を上回ったら.thumbsのポジションをリセット
var resetPos;というのがそもそもよくわかりません
貴書の通りコードを書いて正しく動作しているのですが、動きをイメージ出来なく、また質問も混沌としているのですが、どうかもう少し詳しく教えて頂けないでしょうか?
animate()はCSSの値を徐々に変更することでアニメーションを実現するメソッドです。1回のクリックでアニメーションの最終的な位置がleftプロパティに代入されるわけではありません。おそらく、animate()メソッド自体の動作をもう一度確認されるのがよいと思います(p.164、p.170)。
また、$imgContainerには同じサムネイルのセット(
①
progressプロパティの関数は、animate()メソッドがCSSプロパティを変更するたびに、このサンプルの場合はleftプロパティの値が更新されるたびに呼び出されます。この関数で行っていることは、leftプロパティが更新されるたびに$imgContainerの位置を確認して……
$imgContainerの位置が左端に到達した(②の場合)、または右端に到達した(③の場合)ときに、大きくなりすぎた、または小さくなりすぎた$imgContainerのleftプロパティの値を
ご回答賜りありがとうございます。
例えば「>」ボタンをクリックするとサムネイル画像は左にスライドします。
先生が仰っていたように$imgContainerには同じサムネイルのセットがclone()で2つ入ってます。この幅を超えてしまった時「 if(direction == -1 && $imgList.outerWidth() <= Math.abs($this.position().left))」が、サムネイル画像が途切れてしまう時ですから、resetPos = $this.position().left + $imgList.outerWidth();
$this.css({“left”: resetPos});で0に戻しているという理解でよろしいでしょうか?
少し分かってきたように思います。
それともう一点教えて頂きたいのですが
当章.wrapper-galleryや他章でもございましたが、cssでpadding: 30px 4.166666%と指定されてまされてますが、これは40/960%の計算結果なのは分かるのですが、これは左右に指定するにどういった数値なのでしょうか?
> 例えば「>」ボタンをクリックするとサムネイル画像は左にスライドし……
その理解であっています。
> それともう一点教えて頂きたいのですが
レスポンシブデザインに対応するために、左右パディングを固定数ではなく、割合で設定する必要があります。ここではPC表示で左右に約40pxのパディングを設けたいので、コンテンツが収まる全体の領域の幅(960px)からの割合を計算しています。.galleryなど、ほかの部分のパディング設定も考え方は同じです。