import { getDom, getListDom, addClassName, removeClassName } from "../utils/utils"; function App($root) { this.prev = null; this.current = null; this.next = null; this.makeComponent = () => { $root.innerHTML = `

첫번째

두번째

세번쩨

네번째

다섯번째

`; this.initCarousel(); }; // 초기 Carousel 화면 this.initCarousel = () => { this.carouselItemList = getListDom(".carousel_item"); this.carouselListLength = this.carouselItemList.length; this.currentId = 0; this.showCarouselItem(); }; // 추가 or 삭제 "prev", "Active", "next" this.addOrRemoveActiveClassName = ({ prev, current, next }, callback) => { callback(this.carouselItemList[prev], "prev"); callback(this.carouselItemList[current], "active"); callback(this.carouselItemList[next], "next"); }; // active, next, prev 설정하여 보여줄 Carousel화면 결정 this.showCarouselItem = () => { const { prev, current, next } = this; // active 설정이 있을 경우 if (![prev, current, next].includes(null)) { // active 설정 삭제 this.addOrRemoveActiveClassName({ prev, current, next }, removeClassName); } // active 설정을 위한 index 계산 const { newPrev, newCurrent, newNext } = this.assignActiveNextPrev(); // active 설정 추가 this.addOrRemoveActiveClassName( { prev: newPrev, current: newCurrent, next: newNext }, addClassName ); this.prev = newPrev; this.current = newCurrent; this.next = newNext; }; // active, next, prev 할당 함수 this.assignActiveNextPrev = () => { const { currentId, carouselListLength } = this; const current = currentId < 0 ? (carouselListLength + (currentId % 5)) % 5 : currentId % 5; const prev = current === 0 ? carouselListLength - 1 : (current - 1) % 5; const next = current === carouselListLength ? 0 : (current + 1) % 5; return { newPrev: prev, newCurrent: current, newNext: next }; }; // 왼쪽으로 움직이는 이벤트 this.moveNext = () => { this.currentId += 1; this.showCarouselItem(); }; // 오른쪽으로 움직이는 이벤트 this.movePrev = () => { this.currentId -= 1; this.showCarouselItem(); }; this.setEventListener = () => { const nextButton = getDom(".carousel_button--next"); const prevButton = getDom(".carousel_button--prev"); nextButton.addEventListener("click", this.moveNext); prevButton.addEventListener("click", this.movePrev); }; // 실행함수 this.main = () => { this.makeComponent(); this.setEventListener(); }; this.main(); } export default App;