버튼을 눌렀을때 케러셀의 이동
806
ckc08283832
6 asked
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';
}
}
HTML/CSS
javascript
Answer 2
unregistered 이라 뜨며 작동하지 않습니다.
0
50
1
공부한 내용을 블로그에 정리해서 올려도되나요?
0
93
1
sublime text 설치 불가
0
176
1
사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다
0
98
1
처음 질문과 옵션 관련 질문입니다.
0
89
1
마지막에 news 관련 질문
0
81
1
태그 닫는 단축키가 뭔가요?
0
169
1
강의에 사용하는 예제 코드 자료 있나요?
0
384
1
회원가입 폼 검증하기 실행이 안됩니다.
0
273
1
이미지랑 아이콘 파일을 어떻게 찾아요?
0
350
1
VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요
0
475
0
프로젝트 고민 해결이 안되어 다시 올립니다.
0
391
1
프로젝트 고민 다시올립니다.
0
445
1
친구와의 프로젝트 고민
0
418
1
화면 오른쪽 스크롤이 넘어가질 않아요!
0
514
1
학과 설정
0
328
2
회원가입폼 검증 -2 에서 문제가생겼습니다
0
328
1
card.html 버튼 위치
0
599
1
인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요
0
355
2
carousel의 footer부분에
0
292
1
margin 값에 관한 질문입니다.
0
403
1
function clearMessages() 함수의 원리를 알고싶습니다
0
317
1
removeEventListener
0
233
1
html 파일 올립니다!
0
374
1