jQueryスライダー。マージンアニメーション

Question

私は単純なスライダーを作成しようとしています。マージンアニメーションの問題は、スライダ要素が最後の位置に到達すると、最初の要素が表示され、スライダの動作によってすべての要素が最初の要素までスクロールされます。私はスライダースライドの最後の要素の後に、previus要素から切り替えるときのように、通常のアニメーションを1にする必要があります。 Codepen link https://codepen.io/donchak1610/pen/BZbEXp?editors=1010。下の2番目のボタンのみ。

let buttonPrev = $('#button-prev'); 
let buttonNext = $('#button-next'); 
let screenImage = $('#screen-image'); 
let counter = 1; 
let controlHeight = $('.slider-control__img').height(); 
let controlWrapper; 

buttonNext.click(function() { 
console.log(counter); 
if (counter < 4) { 
    controlWrapper = $(this).find('.slider-control__wrapper'); 
    controlWrapper.css('margin-top', '-='+controlHeight+'px'); 
    counter++; 
} else { 
    counter = 1; 

    controlWrapper.css('margin-top', '0px'); 
} 

}）;

Answer 1

controlWrapper変数が空です。
controlWrapper = $(this).find('.slider-control__wrapper');のようにセレクタを追加する必要があります。

else { 
    counter = 1; 
    controlWrapper = $(this).find('.slider-control__wrapper'); 
    controlWrapper.css('margin-top', '0px'); 
}