我正在尝试创建一个简单的滑块。边距动画中的问题,当滑块元素到达最后一个位置时,它应该显示第一个元素,滑块的行为将所有元素通过前面的元素滚动到开头。我需要在滑块幻灯片的最后一个元素之后将正常动画设置为数字1,就像从previus元素切换时一样。 Codepen链接https://codepen.io/donchak1610/pen/BZbEXp?editors=1010。底部只有第二个按钮。
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');
}
});
答案 0 :(得分:0)
controlWrapper
变量为空
您应该像在此处controlWrapper = $(this).find('.slider-control__wrapper');
一样添加选择器。
else {
counter = 1;
controlWrapper = $(this).find('.slider-control__wrapper');
controlWrapper.css('margin-top', '0px');
}