// 슬라이드 구현-------------------------------------
/*div사이즈 동적으로 구하기*/
const outer = document.querySelector('.outer');
const innerList = document.querySelector('.inner-list');
const inners = document.querySelectorAll('.inner');
let currentIndex = 0; // 현재 슬라이드 화면 인덱스
inners.forEach((inner) => {
inner.style.width = `${outer.clientWidth}px`; // inner의 width를 모두 outer의 width로 만들기
})
innerList.style.width = `${outer.clientWidth * inners.length}px`; // innerList의 width를 inner의 width * inner의 개수로 만들기
/* 버튼에 이벤트 등록하기*/
const buttonLeft = document.querySelector('.button-left');
const buttonRight = document.querySelector('.button-right');
buttonLeft.addEventListener('click', () => {
currentIndex--;
currentIndex = currentIndex < 0 ? inners.length - 1 : currentIndex; // index값이 0보다 작아질 경우 0으로 변경
innerList.style.marginLeft = `-${outer.clientWidth * currentIndex}px`; // index만큼 margin을 주어 옆으로 밀기
clearInterval(interval); // 기존 동작되던 interval 제거
interval = getInterval(); // 새로운 interval 등록
paginationItems.forEach((i) => i.classList.remove("active"));
paginationItems[currentIndex].classList.add("active");
});
buttonRight.addEventListener('click', () => {
currentIndex++;
currentIndex = currentIndex >= inners.length ? 0 : currentIndex; // index값이 inner의 총 개수보다 많아질 경우 마지막 인덱스값으로 변경
innerList.style.marginLeft = `-${outer.clientWidth * currentIndex}px`; // index만큼 margin을 주어 옆으로 밀기
clearInterval(interval); // 기존 동작되던 interval 제거
interval = getInterval(); // 새로운 interval 등록
paginationItems.forEach((i) => i.classList.remove("active"));
paginationItems[currentIndex].classList.add("active");
});
/*주기적으로 화면 넘기기*/
const getInterval = () => {
return setInterval(() => {
currentIndex++;
currentIndex = currentIndex >= inners.length ? 0 : currentIndex;
paginationItems.forEach((i) => i.classList.remove("active"));
paginationItems[currentIndex].classList.add("active");
innerList.style.marginLeft = `-${outer.clientWidth * currentIndex}px`;
}, 5000);
}
let interval = getInterval(); // interval 등록>
// 페이지네이션 생성
const pagination = document.querySelector(".slide_pagination");
// inner의 개수만큼 • 생성
for (let i = 0; i < inners.length; i++) {
if (i === 0) pagination.innerHTML += `•`;
else pagination.innerHTML += `•`;
}
const paginationItems = document.querySelectorAll(".slide_pagination > li");
// 각 페이지네이션 클릭 시 해당 슬라이드로 이동하기
for (let i = 0; i < inners.length; i++) {
// 각 페이지네이션마다 클릭 이벤트 추가하기
paginationItems[i].addEventListener("click", () => {
// 클릭한 페이지네이션에 따라 현재 슬라이드 변경해주기
currentIndex = i;
// 각 슬라이드 아이템의 left에 width 이동
inners.forEach((i) => {
innerList.style.marginLeft = `-${outer.clientWidth * currentIndex}px`;
});
// 슬라이드 이동 시 현재 활성화된 pagination 변경
paginationItems.forEach((i) => i.classList.remove("active"));
paginationItems[currentIndex].classList.add("active");
});
};