-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
버튼을 눌렀을때 케러셀의 이동
22.04.21 20:55 작성 조회수 504
0
버튼을 눌렀을때 한칸씩 가지 않고 두칸씩 이동하는 이유는 어느부분 에서 있을끼요????
window.addEventListener('load', function() {
var carousels = document.getElementsByClassName('carousel');
//dom문법을 쓴다는건 객체를 의미한다
//케러셀 이벤트를 등록하는 로직
//캐러셀 랭스:
for(var i = 0; i < carousels.length; i++) {
addEventToCarousel(carousels[i]); // 현재해당하는 carousels 가져옴(배열)
}
});
//carouselELem에는 carousels[i]가 들어가짐
function addEventToCarousel(carouselElem) {
var ulElem = carouselElem.querySelector('ul');
var liElems = ulElem.querySelectorAll('li');
//너비값 조정
var liWidth = liElems[0].clientWidth; //현재 li의 너비값 : 600px이옴
var adjustedWidth = liElems.length * liWidth; //이미지 갯수 * 너비
ulElem.style.width = adjustedWidth + 'px';//2400px이 됌
//슬라이더 버튼 이벤트 등록 , 슬라이드에 대한 객체 정보 다빼옴
var slideButtons = carouselElem.querySelectorAll('.slide');
//슬라이드 버튼 갯수만큼 반복
for (var i=0; i < slideButtons.length; i++) {
//왼쪽버튼 오른쪽버튼 총 2번을 반복한다.
slideButtons[i].addEventListener('click', createListenerSlide(carouselElem));
}
} //슬라이드 버트을 누를때 이벤트를 클로저로 사용하기위해
//클로저로 해서 캐러셀을 이벤트가 호출될때 바뀌지 않고 사용하기 위해
//버튼이 담겨잇는 케러셀만 가져올수있도록 클로저를 이용
function createListenerSlide(carouselElem) {
return function(event) { //event는 매개변수고 이 블록안에서 사용가능
var clickedButton = event.currentTarget;//현재 클릭한 버튼 가져오기
//클릭이라는 이벤트가 발동됐을때 return함수가 호출이된다.
// 값 가져오기
var liElems = carouselElem.querySelectorAll('li');
var liCount = liElems.length; //길이는 4야
var currentIndex = carouselElem.attributes.data.value;
//currentIndex : 현재 보고있는 이미지의 순번
//carouselElem의 모든 속성을 가져오고 데이터를 가져오겠다
//슬라이드 버튼 체크 right값을 포함하는지
//-1해주는이유는 4개일경우 마지막은 3이 마지막이기때문
if(clickedButton.className.includes('right') && currentIndex < liCount - 1) {
currentIndex ++;
scrollDiv(carouselElem, currentIndex);
//위에서 3이라면 ++되므로 4번의 위치로 스크롤을 조정해주는 역할
} else if(clickedButton.className.includes('left') && currentIndex > 0) {
currentIndex --; //0이면 왼쪽으로 못넘김
scrollDiv(carouselElem, currentIndex);
}
//인디케이터 업데이트
updateIndicator(carouselElem, currentIndex);
//슬라이드 버튼 보여줌 여부 업데이트
updateSlideButtonvisible(carouselElem, currentIndex, liCount);
//새롭게 보여지는 이미지 인덱스 값을 현재 data 값으로 업데이트
carouselElem.attributes.data.value = currentIndex;
//만약 currentIndex가 2라면 1에서 2로 바뀌는것
}
}
//다음으로 이동할 매개변수로 nextIndex 이용
//여기서 왜 2칸씩 가게될까
function scrollDiv(carouselElem, nextIndex) {
var scrollable = carouselElem.querySelector('div');//오버플로 히든되는
var liWidth = scrollable.clientWidth;//div의 사이즈 600이라 600이올거임
var newLeft = liWidth * nextIndex; //2번을 하야된다 하면 1200px이 움직일것
scrollable.scrollTo({left: newLeft, behavior: 'smooth'});
}
//querySelectorAll 이기 때문에 배열로 받아온다
function updateIndicator(carouselElem, currentIndex) {
var indicators = carouselElem.querySelectorAll('footer > div');
for (var i = 0; i < indicators.length; i++) {
if (currentIndex == i) {
indicators[i].className = 'active';//객체이므로 .className을 쓰는거지
}
else {
indicators[i].className = '';
}
}
}
function updateSlideButtonvisible(carouselElem, currentIndex, liCount) {
var left = carouselElem.querySelector('.slide-left');
var right = carouselElem.querySelector('.slide-right');
if (currentIndex > 0) {
left.style.display = 'block';
}
else {
left.style.display = 'none';
}
if(currentIndex < liCount - 1) {
right.style.display = 'block';
}
else {
right.style.display = 'none';
}
}
답변을 작성해보세요.
답변 2