度々の質問失礼いたします
何点か疑問がございまして、ご教授頂きたく存じます
 
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;というのがそもそもよくわかりません

 
貴書の通りコードを書いて正しく動作しているのですが、動きをイメージ出来なく、また質問も混沌としているのですが、どうかもう少し詳しく教えて頂けないでしょうか？