안녕하세요 선생님! 자바스크립트 중급의 캐러셀 만들기 중인데요, 이해가 안 되는 부분이 있어서요.
기본 코드를 이렇게 변형 시켜보았는데 'length'의 부분이 좀 이상합니다. 제가 가지고 있는 'slide-box'는 3개인데
totalPhotos를 콘솔에서 확인해보면 3으로 나와요. 그리고 그 마지막 4번째 요소는 그냥 하얀 공백입니다.
제가 알기론 length도 0부터 세는 걸로 알아서, totalPhotos가 2가 나올 것을 기대했는데 왜 이런 결과가 나오는 걸까요?? ㅜㅠ
// html
<div style="overflow: hidden;">
<div class="slide-container">
<div class="slide-box">
< img src="img/car1.png">
</div>
<div class="slide-box">
< img src="img/car2.png">
</div>
<div class="slide-box">
< img src="img/car3.png">
</div>
</div>
</div>
<button class="before">Before</button>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="next">Next</button>
// javascript
var currentPhoto = 0;
var totalPhotos = $('.slide-container .slide-box').length;
console.log(totalPhotos);
$('.next').on('click', function() {
currentPhoto += 1;
if (currentPhoto > totalPhotos) {
currentPhoto = 0;
}
updateSlide();
console.log(currentPhoto);
})
$('.before').on('click', function() {
currentPhoto -= 1;
if (currentPhoto < 0) {
currentPhoto = totalPhotos - 1;
}
updateSlide();
console.log(currentPhoto);
})
function updateSlide() {
$('.slide-container').css('transform', 'translateX(-' + currentPhoto + '00vw)');
}
